(css布局)宽高自适应

一、宽高自适应

网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应。
自适应的优点：
元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。
(1) 宽度自适应
元素宽度设置为100%。（块元素宽度默认为100%）
或者不设置宽度（width）;（宽度是父元素的宽度）
(2) 高度自适应
1)自适应元素高度：height:auto;或者不设置;（是子元素撑开父元素的高度）
2)元素高度自适应窗口高度
设置方法：html,body{height:100%;} div{ height:30%;}
注：如果设置子元素的高度跟随父元素的高度变化而变化，那么父元素必须有高度。
(3) 元素具备最小高度的自适应
min-height属性：最小高度；
hack1:min-height:value;_height:value;
hack2:min-height:value; height:auto!important;height:value;
说明：height属性在IE6里就类似min-height作用。
max-height:最大高度
min-width:最小宽度
max-width:最大宽度
注：IE6及以下版本不识别该组属性。
注：height属性在IE6里就类似min-height作用。
(4) 浮动元素父元素高度自适应（高度塌陷）

当子元素有浮动并且父元素没有高度的情况下父元素会出现高度塌陷
1：给父元素添加声明overflow:hidden; (触发一个BFC)
缺点：隐藏内容区以外的元素
2:在浮动元素下方添加空div,并给该元素添加声明：
div{clear:both; height:0; overflow:hidden;}
缺点：造成代码的冗余
3:万能清除浮动法 (给父级加 class = ‘clear’ 即可使用)
选择符:

.clear::after {
	content: ".";
	clear: both;
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	font-size: 1px;
}

使用方便简洁
(5) visibility:hidden/visible;隐藏/可见
visibility:hidden;和display:none;的区别：
visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域，
而 display:none属性会使这个对象彻底消失, 也不再占用位置。