2.5 CSS 宽高自适应

宽高自适应

自适应

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

宽度自适应高度自适应

（1）宽度自适应
元素宽度的默认值为auto
（2）高度自适应
元素高度的默认值{height:auto;}

min-width:200px 最小宽度不低于200px；
max-width:300px 最大宽度不高于300px；
min-height:200px 最小高度不低于200px;
max-width:300px 最大高度不低于300px;

浮动元素的高度自适应

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

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

方法2：在浮动元素下方添加空块元素，并给该元素添加声明：clear:both;height:0;overflow:hidden;
(缺点：在结构里增加了空的标签，不利于代码的可读性，并且降低了浏览器的性能)

方法3：万能清除浮动法
选择符符:after{content:" ";clear:both;display:block;height:0;visibility:hidden;/overflow:hidden;}

visibility:hidden;和overflow:hidden;的区别：
overflow:hidden;脱离文档流不会占据原来的位置；重新显示后会占据原来的位置
visibility:hidden;不脱离文档流，隐藏元素

窗口自适应

盒子根据窗口的大小进行改变
设置方法：html，body{height:100%;}
由于html标签和body标签未定义高度，默认高度是0，所以需要先对html和body设置高度。

calc()函数的使用

cale()函数：用于动态计算长度值。
需要注意的是，运算符前后都需要保留一个空格，例如：width:calc(100%-100px);
任何长度值都可以使用calc()函数进行计算;
calc()函数支持"+“,”-",“×”,"÷"运算;
cale()函数使用标准的数学运算优先级规则;