宽高自适应

定义

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

自适应的优点

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

宽度自适应

元素宽度设置为100%。（块元素宽度默认为100%） 或者不设置宽度（width）;（宽度是父元素的宽度）

高度自适应

1、自适应元素高度：height:auto;或者不设置;（是子元素撑开父元素的高度）

2、元素高度自适应窗口高度 设置方法：html,body{height:100%;} 

    如果设置子元素的高度跟随父元素的高度变化而变化，那么父元素必须有高度。

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

min-height属性：最小高度；(IE6浏览器不识别该属性)

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

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

说明：height属性在IE6里就类似min-height作用。 min-height（最小高度） max-height(最大高度) max-height:200px; height:200px!important; min-width(最小宽度) max-width(最大宽度) 注：IE6及以下版本不识别该组属性。

 

一页屏缺点

1、上下移动一定是定位

2、图片有时会变形

3、默认情况下，一个块元素的宽是撑满父元素的

    但如果给了绝对定位和浮动，不设置宽为100%，改变元素的宽度就是内容的宽