宽高自适应

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

二、宽度自适应方式
1、宽度不写一般给的是最大的盒子
2、宽度的单位不用px，用相对单位比如%;—般都是里面的容器3、用min-width、max-width设置。用在响应式布局上

三、高度自适应
1、高度不写，
存在问题:如果子元素浮动,父元素会高度塌陷。(高度塌陷)
2、高度的单位不用px,用相对单位比如%;
默认情况下, height用%是不生效的,需要给body,htmI{height:100%;}
3、用min-height、max-height设置。min-height对于IE6不兼容，需要调试。
4、高度塌陷
产生条件：
所有子元素浮动，父元素没有设置高度，最近的父元素会高度塌陷
解决方法：
（1）给父元素加overflow：hidden
（2）给浮动元素下方添加空div，并给浮动元素添加div{ clear：both； height：0; overflow:hidden;}
(3) 万能清除浮动法给父元素
父元素:after{content:".";clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}
5、伪对象选择器 伪对象选择器的权重是1
（1）:after或者::after div:after{content:“文字”} div:after{content:url(); 与content属性一起使用,定义在对象后的内容
（2）:before或者:before div:before{content:“文字”} div:before{content:url()} 与content属性一起使用，定义在对象前的内容
（3）:first-letter或:first-letter div:first-letter 定义对象内第一行的样式，注:该伪元素只能用于块元素
（4):first-line或者::first-line div:first-line 定义对象内第一行的样式，注:该伪元素只能用于块元素
（5） :selection div:election 选中之后的样式只支持这background color属性
注：前面的4个可以是双冒号也可以是单冒号，但是:selection必须是双冒号
6、最小高度的兼容
元素具备最小高度的自适应
min-height属性:最小高度;(IE6浏览器不识别该属性)兼容元素具备最小高度自适应的方法:
hack1:min-heightvalue;_height:value;
hack2:min-height:value; heightauto !important; heightrvalue;(建议使用不能换顺序)