宽高自适应

网页布局中经常要定义元素的宽和高。

很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应。

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

宽度自适应

块级元素宽度设置成100%，或者不设置，都是占父级元素的一整行

高度自适应

父元素高度由子元素撑开

父元素的高度若不设置，可以由子元素撑开

高度塌陷问题

子元素都浮动了，父元素会存在没有高度的问题。

解决办法(清除浮动)：

• 给父元素加overflow:hidden;

• 万能清除浮动，伪元素清除浮动

  // 给父元素添加类名clearfix
  .clearfix::after{
      content:"";
      display: block;
      height: 0;
      clear:both;
      overflow:hidden;
      visibility:hidden;
      /*兼容ie*/
      /* zoom:1; */
  }
  

元素高度自适应窗口高度

若是想让元素高度自适应窗口高度，html,body{heihgt:100%;}，接着元素高度100%

最大、最小宽度（高度）

以最小高度举例：

若是容器中的内容可能为空的时候，才要给容器添加最小高度min-height，当内容高度小于最小高度时，则容器高度为最小高度。当内容高度大于最小高度，则容器高度由内容撑开。

\