如何实现宽高自适应

什么是宽高自适应

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

宽高自适应的优势

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

如何实现宽度自适应

当块状元素不写宽度的时候，默认的宽度是100%（即相对于父元素的宽度，始终跟父元素同宽），所以可以通过定义百分比代替具体值来设定宽度。在此前提下如果给块元素加了绝对定位或者固定定位，元素宽度就不以100%显示，同时也不会跟父元素同宽，而是跟里面的内容同宽，如果元素里面没有内容，有没有定义宽高，这个时候，元素不会显示。

值得注意的是，通过定义百分比设置宽时（之后的高度相对窗口自适应也与之相同），元素都是参考当前位置最近的父元素来计算百分比的对应值(百分比显示大小的参照物就是当前元素的最近父元素）。

如何实现高度自适应

1、相对窗口自适应：
这种情况类似之前所描述性的宽度自适应，也是通过定义百分比代替具体值来设定宽度，一般用在当前页面只有一竖屏显示高度的情况下。值得注意的是在当前情况下我们需要给html与body设置高度100%。如下：

2、相对元素或者内容自适应：

当页面不是一屏显示时，我们又该怎么做呢？这是我们要做的就是相对元素或者内容进行自适应，下面我将介绍两种实现方法：
1）非浮动元素的父元素高度自适应

a）不设置高度，或者高度设置成 ： height:auto；

b）通过定义最小高度实现 ：

c）给需要高度自适应的元素添加这些属性：

注：带有!important；关键字过滤器的属性，要写到相同属性之前；

2）浮动元素的父元素高度自适应

不知读者是否遇到过这种情况：当父元素不设置高度的时候，第一级子元素浮动后，父元素高度就消失了（即高度塌陷），解决这个问题就可以实现浮动元素的父元素高度自适应。

a）给父元素添加overflow：hidden；
弊端：只要里面的内容或者元素超出父元素以外，就会被隐藏；

b）在浮动元素的下方添加一个空标记，并且给设置属性为：

弊端：会添加很多空标记，增加结构负担，产生代码冗余；

c）给父元素添加display：table：

弊端：会改变当前元素的元素类型；

d）万能清除法（推荐使用）：