宽高自适应与高度塌陷

1.宽高自适应：网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应。

        宽度自适应    元素宽度设置为100%。（块元素宽度默认为100%）
        元素脱离文档流（浮动或绝对定位）可使元素自适应内容宽度

        高度自适应    元素的高度自适应： 设置如： div {height : auto;}   

        窗口的高度自适应：             
        设置：body，html{height：100%；} div{height：30%；}

2.元素宽高最大最小值设置：

min-height（最小高度）

max-height(最大高度) 

min-width(最小宽度)

max-width(最大宽度)

注：IE6及以下版本不识别该组属性

1）_ 下划线属性过滤器   
当在一个属性前面增加了一个下划线后，由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明，但是在IE6及更低版本浏览器中会继续解析这个规则。

语法：选择符{  _属性：属性值；}

此方法是区分IE6浏览器和其他浏览器的方法；
2）!important最高权重关键字过滤器 它表示所附加的声明具有最高优先级的意思。被浏览器优先显示。（IE6不识别此写法） 语法：选择符{属性：属性值!important;}

3.高度塌陷：

方法1：给父元素添加声明overflow:hidden;

方法2：给父元素加高度

方法3：在浮动元素下方添加空div,并给该元素添加声明

div{
clear:both;
 height:0; 
overflow:hidden;}

方法4：万能清除法:

.clear-fix::after{
    content:'';
    width:100%;
    height:0;
    display:block;
    overflow:hidden;
    clear:both;
    visibility:hidden;
}

4.伪对象选择器

1）、::after: 与content属性一起使用，定义在对象后的内容。

语法：选择符:：after{content:”文字”;}     选择符:：after{content:url(图片路径)；}
 
2）、::before:与content属性一起使用,定义在对象前 的内容。     

 3）、::first-letter 定义对象内第一个字符的样式。   
说明：    *(该伪元素只能用于块级元素。)

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

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