一、宽高自适应
网页布局中经常要定义元素的宽和高；但很多时候我们希望元素的大小能够根据窗口或父元素自动调整，这就是自适应，元素自适应在网页布局中非常重要，tanenggou它能够使网页显示更灵活，可以适应在不同设备、不同窗口和分辨率下显示。
（一）宽度自适应
1.元素宽度默认设置为100%（块元素宽度默认为100%）
（二）高度自适应
1.窗口高度自适应
设置方法：html，body{height：100%；
自适应元素高度：height：100%；
2.元素高度自适应
1）非浮动元素的父元素，高度的自适应
hack1：height：auto；或不写height属性
hack2：min-height：value；_height：value；_下划线过滤器只有IE6识别
hack3：min-height：200px；height：auto ！important；height：200px；
拓展：！important；关键字过滤器：选择符{属性：属性值 ！important；}
他表示所附加的声明具有最高最优先级的意思，但由于IE6及低版本浏览器不能识别他，我们可以利用IE6这个bug作为过滤器来兼容IE6和其他标准浏览器；
注：同时设置两个高度，优先级声明的属性要放到前面。
min-height（最小高度）；max-height（最大高度）；
min-width（最小宽度）；max-width（最大宽度）；
IE6不支持该组属性。
2）浮动元素的父元素高度自适应（高度塌陷）
hack1：隐藏法，给父元素添加声明overflow：hidden；
hack2：在浮动元素下方添加空div，并给该元素添加声明：clear：both；height：0；overflow：hidden；
hack3：万能清除法：给浮动元素的父元素清除浮动；
.box:after{content：“.”；clear：both；display：block；height：0；overflow：hidden；visibility：hidden；}
拓展：.clear{zoom：1；}主要用来清除IE6、7的浮动问题，他是属于IE的属性，另外还有缩放功能
3.伪元素选择符：
1）：after 与content属性一起使用，定义在对象后的内容；
2）：before 与content属性一起使用，定义在对象前的内容；
拓展：{content：url（图片路径）；}
3）：first-line 定义对象内第一行的样式
4）：first-letter 定义对象内第一个字符的样式
注：伪元素选择符只能用于块元素有效，IE6不支持
4.检索对象是否显示：visibility：hidden/visible
display：none/block与visibility：hidden/visible的区别：
display：none；在隐藏元素的同事，元素所占据的空间也一起隐藏，而visibility：hidden；在隐藏元素的同时，所占据的空间依然会保留；
display：none/block与visibility：hidden/visible的共同点：
都可以设置元素显示或者隐藏的属性；