如何灵活实现宽高自适应？

1. 网页布局中常常需要定义元素的宽高，但是随着各种显示设备，各中不同窗口，以及各种分辨率的层出不穷，我们需要让页面自适应，使网页的显示更加灵活，可以适应各种显示情况。
2. 最常见的是相对窗口和父元素的自适应写法。
   1>在块状元素不设置宽度的时候，默认该元素的宽度就是他的父元素的宽度；
   2>全屏显示的页面必须要给HTML，body设置高度100%，当然，这是相对窗口的情况，而且在百分比设置宽高的时候，都是相对当前元素最近的父元素显示的百分比的值，所以，当我们相对元素或者内容的时候，如何做到自适应显示呢？
   首先是非浮动元素的高度自适应，我们会有以下的方法：1.不设置高度或者高度设置成height：auto；；2.通过最小高度实现高度自适应：min-height：100px;或_height:100px;；3.给需要高度自适应的元素添加以下的属性：min-height:value;height:auto !important;height:value;以此，我们可以实现非浮动元素的高度自适应。
   其次是浮动元素的高度自适应，为什么浮动元素会有这种情况发生呢？因为我们对浮动元素的父元素一般是不设置高度的，这就导致父元素的第一级子元素浮动后，父元素的高度就会塌陷，那我们为父元素设置高度不就解决问题了吗？但是这样我们就失去了要实现高度自适应的原本目标了。常见解决浮动元素高度自适应的方法有1.overflow:hidden;他能解决高度父元素高度坍塌的问题，但是也存在不足之处，就是当你的内容超出父元素高度，超出来的部分就会被自动隐藏；2.display:table;给父元素添加该属性，父元素就会转换属性，拥有表格属性，但是缺点也很明显就是改变了元素属性；3.万能清除法
   父元素：after{ content:" "; clear:both; display:block; height:0; overflow:hidden; visibility:hidden; }
   也是最推荐的方法。
   逆战班