布局方式之宽高自适应
什么是宽高自适应网页
网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应。
它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。
实现
宽度自适应
块级元素宽度为默认的auto
高度自适应
元素{height:auto;}/高度不写
最小宽度/最大宽度
min-width
max-width
最小高度/最大高度
min-height
max-height
出现的问题
高度塌陷
父元素没有设置高度，子元素设置了浮动后，父元素会发生高度塌陷。(本质来说是浮动所产生的影响)
解决方案
给父元素添加声明overflow:hidden;(缺点：会隐藏溢出的元素
在浮动元素下方添加空块元素,并给该元素添加声明：clear:both;height:0;overflow:hidden;
缺点：在结构里增加了空的标签，不利于代码可读性，且降低了浏览器的性能
万能清除法
选择符:after{content:".";clear:both;display:block;height:0;visibility:hidden; }
父容器选择符{zoom:1;}/为了兼容IE6,IE7/
伪类选择符(伪元素)
:after
:before
:first-letter
:first-line
元素隐藏和显示
属性:visibility
hidden
visible
inherit
属性display
none
block
二者的区别
visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，而 display:none属性会隐藏内容且空间消失。
过滤器Filter
它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。
常见过滤器
下划线属性过滤器
当在一个属性前面增加了一个下划线后，由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明，但是在IE6及更低版本浏览器中会继续解析这个规则。
语法：选择符{_属性：属性值；}
!important关键字过滤器
它表示所附加的声明具有最高优先级的意思。但由于IE6及更低版本不能识别它(important)，我们可以利用IE6的这个Bug作为过滤器来兼容ＩＥ６和其它标准浏览器。
语法：选择符{属性：属性值!important;}
例如
兼容元素具备最小高度自适应的方法：
hack1:min-height:value; _height:value;
hack2:min-height:value; height:auto!important; height:value;(建议使用)
/+属性过滤器
当在一个属性前面增加了后，该属性只能被IE7及以下版本浏览器识别，其它浏览器忽略该属性的作用。
语法：选择符{*属性：属性值；}
ie9以下
语法：选择符{属性：属性值\9;}
ie8及以上
语法：选择符{属性：属性值\0;}
元素高度自适应窗口高度
设置方法
html,body{height:100%;}
自适应元素高度：height:100%;
iframe
在网页中嵌套别的网页
语法：