【css】----宽高自适应

宽高自适应

一、概念

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

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

（1）宽度自适应

      块元素宽度默认为auto

(2) 高度自适应

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

 

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

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

方法1：

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

方法2：

hack2:在浮动元素下方添加空块元素,并给该元素添加声明：

clear:both;

height:0;    注释：为了兼容其他浏览器

overflow:hidden;  （溢出隐藏，这个主要是触发浏览的bfc选择规则，缺点是再使用定位的时候，超出部分无法使用）

（cyf总结：块元素+clear：both；）

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

方法3

hack3:万能清除浮动法

伪元素选择器

选择符:after{ 

content:" ";

clear:both;

display:block;

height:0;  /*这个添加是为了解所有浏览器的兼容问题*/

visibility:hidden;    /* 这个跟overflow:hidden 一样可以实现效果，为了兼容性加入*/

}

例如：

 

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