宽高自适应+ 伪元素

● 宽高自适应
○ 网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应。元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。
○ 宽度自适应：元素宽度设置为100%。（块元素宽度默认为100%）
○ 高度自适应：元素高度设置为100%（前提给父元素设置高度）
○ min-height（最小高度）
○ max-height(最大高度)
○ min-width(最小宽度)
○ max-width(最大宽度)
注：IE6及以下版本不识别该组属性。
○ (IE6浏览器兼容最小高度的写法)
■ hack1:min-height:value; _height:value;
■ hack2:min-height:value;height:auto!important;height:value;(建议使用)
注：height属性在IE6里就类似min-height作用。
● 伪元素
○ 选择符:after与content属性一起使用，定义在对象后的内容。
■ 例：div:after{content:url(logo.jpg);}
div:after{content:"文本内容";}
○ :before与content属性一起使用，定义在对象前的内容。
■ 例：div:before{content:"在其前放内容";}
○ ::selection使被选中的文本成为红色(css3新增)
○ ：first-letter:定义对象内第一个字符的样式。
○ ：first-line:定义对象内第一行的样式。
说明：
*(first-letter和first-line该伪元素只能用于块级元素。)
*ie6以下版本浏览器不支持伪对象选择符。
● 扩展
○ 清除浮动
■ left:清除左浮动
■ right清除右浮动
■ both清除左右浮动
○ *一个元素浮动，一个元素不浮动时会受影响
同级要浮动都浮动，给不浮动的清除浮动
● 高度自适应
○ 元素高度自适应窗口高度
■ 设置方法：html,body{height:100%;}
■ 自适应元素高度：height:100%;
○ 浮动元素父元素高度自适应（高度塌陷）
○ hack1：给父元素添加声明overflow:hidden;
○ hack2:在浮动元素下方添加空div,并给该元素添加声明： clear:both;height:0;overflow:hidden;
○ hack3:万能清除浮动法(建议使用)
:after{content:".";display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}