好程序员web前端分享高度自适应

  

　　好程序员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);}