CSS快速学习10：高度自适应

高度自适应

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

元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。

（1）宽度自适应

元素宽度设置为100%。（块元素宽度默认为100%）

（2）元素具备最小高度的自适应

min-height属性：最小高度；

说明：IE6浏览器不识别该属性，height属性在IE6里就类似min-height作用。

hack1:min-height:value; _height:value;

hack2:min-height:value;  height:auto!important;  height:value;   

（3）高度自适应

        1)元素高度自适应窗口高度

        设置方法：html,body{height:100%;}

        需要自适应的元素： height:100%;

        2)自适应元素高度：

        父元素：height：value；

        需要自适应父元素高度的子元素： height:100%;

height:auto，是指根据块内内容自动调节高度。
height:100%，是指其相对父块高度而定义的高度，也就是按照离它最近且有定义高度的父层的高度来定义高度。

background-size: length|percentage|cover|contain;

Length：设置背景图像的高度和宽度。

第一个值设置宽度，第二个值设置高度。

如果只设置一个值，则第二个值会被设置为 "auto"。

Percentage：以父元素的百分比来设置背景图像的宽度和高度。

第一个值设置宽度，第二个值设置高度。

如果只设置一个值，则第二个值会被设置为 "auto"。

Cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

背景图像的某些部分也许无法显示在背景定位区域中。

Contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

（4）浮动元素父元素高度自适应（高度塌陷）

hack1：给父元素添加声明overflow:hidden;

hack2：在浮动元素下方添加空div,并给该元素添加声明：clear:both;height:0;overflow:hidden;font-size:0;

hack3：万能清除浮动法

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

*visibility:hidden/visible;隐藏/可见

 

*visibility:hidden;和display:none;的区别：

visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域，而 display:none属性会使这个对象彻底消失。