元素的宽高自适应

宽高自适应：网页布局中经常要定义元素的宽和高，但很多时候我们希望元素的大小能够根据窗口或者子元素的大小来自动调整，这时候就要用到自适应了。元素自适应在网页布局中非常重要，它能够使网页显示更加灵活，可以适应在不同设备、不同窗口、不同分辨率下显示。下面来介绍下不同情况下自适应的写法：

      一：相对窗口和父元素的自适应写法
            宽度：
            当块状元素不写宽度的时候 ，默认宽度是100%；是父元素的100%；
            也就是始终与父元素同宽。width：100%；如果给块状元素加了绝对定位
            或者固定定位，他的宽度就不是100%显示了，而是跟里面的内容同宽，如
            果元素里面没有内容，或者没有定义宽高，这个时候元素就不见了。

          高度：
                  让元素的高度相对浏览器显示百分比的时候，一点要给html和body
                  设置高度100%，html,body{height:100%;} 百分比设置宽高的时候，
                  都是相对当前元素最近的父元素显示百分比的值。

      二：相对元素或者内容进行自适应：
                  非浮动元素的父元素高度自适应  
                  1、不设置高度或者高度设置成height：auto；
                  2、通过设置最小高度来实现高度自适应 min-height：xx px;
                  3、给需要设置高度自适应的元素添加：min-height:value ；height：auto；

                  浮动元素的父元素高度自适应
                  1、给父元素设置固定的高
                  2、给父元素添加overflow：hidden；
                  3、在浮动元素下方添加一个空标签，并给它设置属性
                             <div class="clear_fix"></div>
                             clear:both;height:0;overflow:hidden;
                  4、给父元素添加display：table