web前端学习:高度自适应知识点

一、宽高自适应

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

它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。

（1）宽度自适应

块元素宽度默认为auto

（2） 高度自适应

元素{height:auto;}/高度不写

二、浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）

解决高度塌陷的方法（清除浮动的方法）：

方法1：给父元素添加声明overflow:hidden;(缺点：会隐藏溢出的元素)

hack2:在浮动元素下方添加空块元素,并给该元素添加声明：clearboth;height:0;overflow:hidden;

（缺点：在结构里增加了空的标签，不利于代码可读性，且降低了浏览器的性能）

hack3:万能清除浮动法

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

父容器选择符{zoom:1;}/*为了兼容IE6,IE7*/

三、伪类选择符/ ::伪元素或叫伪对象

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

如：div:after{content:url(logo.jpg);}

div:after{content:"文本内容";}

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