宽高自适应

自适应：

网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或者子元素调整，这就是适应

1.宽度自适应高度自适应

1.宽度自适应
​
元素的默认值为auto
宽度不写或者width:auto就是自适应
用于：导航栏，通栏布局
min-width:;最小宽度
max-width:;最大宽度
​
2.高度自适应
​
元素的默认值{height:auto;}
min-height：数值;
最小高度，如果里面没内容按最小高度显示
max-height:;
最大高度

2.浮动元素之父元素高度自适应

父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷

方法：1给父元素添加声明overflow:hidden;(缺点：会隐藏溢出元素)

2在浮动元素下添加空块元素，并给元素添加声明：clear:both;height:0;overflow:hidden;

(缺点：在结构里增加了空标签，不利于代码可读性，且降低了浏览器性能)

3万能清除浮动法

选择符：after{content:""; clear:both;display:block;height:0;visibility:hidden;/overflow:hidden;}

clear: both;

/* 清除浮动 ，content插入是行内元素不好用*/

visibility: hidden;

/* 可见属性设置隐藏 */