宽高自适应

宽高自适应

网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是pc自适应。
自适应的优点：
元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。

宽度自适应

元素宽度设置为100%。（块元素宽度默认为100%）
或者不设置宽度（width）;（宽度是父元素的宽度）

高度自适应

1)自适应元素高度：height:auto;或者不设置;（是子元素撑开父元素的高度）
​
2)元素高度自适应窗口高度
设置方法：html,body{height:100%;}
注：如果设置子元素的高度跟随父元素的高度变化而变化，那么父元素必须有高度。

最小高度的自适应

min-height属性：最小高度；(IE6浏览器不识别该属性)
​
hack1:min-height:value;_height:value;
​
hack2:min-height:value; height:auto!important;height:value;

浮动元素父元素高度自适应（高度塌陷）

当子元素有浮动并且父元素没有高度的情况下父元素会出现高度塌陷

高度塌陷的解决方法

hack1：给父元素添加声明overflow:hidden;(触发一个BFC)
hack2: 在浮动元素下方添加空div,并给该元素添加
声明：div{clear:both; height:0; overflow:hidden;}

hack3:万能清除浮动法

选择符:after {
    content: "";
    clear: both;
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

visibility:hidden/隐藏

visibility:hidden;和display:none;的区别：
visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域，而 display:none属性会使这个对象彻底消失不显示，也不再占用位置。

伪对象选择符

1）、::after : 与content属性一起使用，定义在对象后的内容。
语法：选择符:：after{content:”文字”;}
选择符:：after{content:url(图片路径)；}
如：div::after{content:url(logo.jpg);}
div::after{content:"文本内容";}
2）、::before: 与content属性一起使用,定义在对象前 的内容。
div::before{content:"在其前放内容";}
3）、::first-letter 定义对象内第一个字符的样式。
说明：
*(该伪元素只能用于块级元素)
4）、::first-line:定义对象内第一行的样式。
*(该伪元素只能用于块级元素。)

 

补充：

一、相对窗口和父元素的自适应写法：
宽度：
当块状元素不写宽度的时候，默认的宽度就是100%； 是父元素的宽度的100%；也就是始终跟父元素是同宽的。
width：100%；
默认情况下：如果给块元素加了绝对定位或者固定定位，他的宽度就不在是100%显示了。也不会跟父元素同宽的，

而是跟里面的内容同宽，如果元素里面没有内容，有没有定义宽高，这个时候，元素就不见了

高度：
当让元素的高度相对浏览器窗口显示百分比的值得时候，一定要给HTML和body设置高度100%；

高度自适应：
1、相对窗口自适应 html,body{height:100%;} （全屏显示的页面必须要给 html,body设置高度100%）

注：百分比设置宽高的时候，都是相对当前元素最近的父元素显得的百分比的值(百分比这个值显示大小的参照物就是自己最近的父元素)
—————————————————————————————————————————————————

2、相对元素或者内容自适应：
如何实现元素高度自适应？先思考这两个问题：
a、如果想实现元素高度自适应，高度能不能设置成固定的值？？
b、如果高度不能固定，那该怎么设置呢？？
第一种情况：
1）非浮动元素的父元素高度自适应
实现方法：
1、不设置高度，或者高度设置成 ： height:auto；
2、通过最小高度实现高度自适应 ： min-height:300px;_height:300px;
3、给需要高度自适应的元素添加这些属性：
min-height:value; height:auto !important;height:value;
注：带有!important；关键字过滤器的属性，要写到相同属性之前；

兼容IE6的写法：
/*_height:300px;*/ /* “_” 叫做下划线过滤器，加了下划线过滤器之后，只有IE6 这个浏览器识别当前的属性，其他浏览器就都不识别了。 */

height:auto !important;/* 具有最高优先级，有的的浏览器都会去识别这具有!important；过滤器的这个属性 ；!important; 对于IE6来说，是无效的，IE6不支持*/
height:300px;/* 专门让IE6识别的 */

过滤器："_" 叫做下划线过滤器，专门来单独过滤IE6 这个浏览器的。_height:300p;x

“*”、“+” 过滤IE7 及以下浏览器的；*height:300px;
"\9" 过滤所有的IE浏览器的； height：300px \9;
“ \0 ” 过滤IE8及以上浏览器； height：300px \0;
!important； 关键字过滤器，具有最高优先级；ie6不支持；

 

第二种情况：
2）浮动元素的父元素高度自适应

说明：当父元素不设置高度的时候，第一级子元素浮动后，父元素高度塌陷；

怎么去解决？（只要解决高度他显得问题，父元素就能实现高度自适应了）

1、可以个固定高度去解决解决高度塌陷问题，
弊端：但是不能让元素高度自适应了 。

2、overflow：hidden; 解决高度塌陷并能实现高度自适应的方法一；（遵循BFC的显示原则） 弊端：只要里面的内容或者元素超出父元素以外，就会被隐藏；

3、在浮动元素的下方添加一个空元素，并且给他设置一下属性： 空标记：<div class="clear_fix"></div>
clear:both;height:0;overflow:hidden;
弊端：会添加很多空标记，增加结构负担，产生代码冗余；

4、display:table; 给父元素添加display：table；让父元素转换元素类型跟表格的特性一样；
弊端：会改变当前元素的元素类型；

5、万能清除法：
:after{content:“";clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}    说明：推荐使用万能清除法；

弊端：单词太多，不好记；

伪元素（对象）选择器：（这几个伪元素选择器前面的冒号可写一组，也可以写两组；）
1）、::after : 与content属性一起使用，定义在对象后的内容。（必须具有属性content：“”；）

语法：选择符: ：after{content:”文字”;}
选择符: ：after{content:url(图片路径)；}

2）、::before : 与content属性一起使用,定义在对象前 的内容。

语法：选择符: ：before{content:”文字”;}
选择符: ：before{content:url(图片路径)；}
3） ::first-letter 定义对象内第一个字符的样式。
说明：*(该伪元素只能用于块级元素)

4） ::first-line:定义对象内第一行的样式。
说明：*(该伪元素只能用于块级元素。)    

隐藏属性：visibility:visible 显示/hidden 隐藏;

visibility:hidden;和display:none;的区别：
visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域；
而 display:none属性会使这个对象彻底消失不显示，也不再占用位置。

总结： visibility:hidden；让元素隐藏；元素的位置是保留的；
display:none：让元素隐藏； 元素的位置不保留，也被隐藏了；

设置背景图大小的属性： background-size:

px 设置两个值： 第一个值代表的是 宽 ； 第二个值 是高
% 设置两个值： 第一个值代表的是 宽 ； 第二个值 是高（相对元素大小显示的百分比大小，）
cover 让图片等比例放大或缩小，直到把元素的两边都覆盖满为止；（覆盖整个元素）
contain 让图片等比例放大或缩小，图片完全显示在元素范围内；（被包含在整个元素内）

min-width: 最小宽度
max-width： 最大宽度
min-height： 最小高度
max-height： 最大高度

注：这组属性在IE6浏览器里是不支持的；

padding和margin显示百分比显示值得时候，他的参照物是根据窗口的宽度来显示的。（注意点）左右设置是可以的

padding-top/bottom ;margin-top/bottom; 在设置百分比的时候，百分比大小显示的参照物是窗口宽度（会根据窗口宽度显示百分比的值。）