css回顾2

Posted 2021-06-21 乾坤未定，你我皆黑马

一、自适应

1、宽度自适应

块元素不设置宽度或是块元素设置宽度100%，块元素的宽度占满整个父级的宽度。

（1）不设置width（块元素是占位置，元素类型没有受影响）

（2）width：100%（元素类型受影响，脱离文档流，设置浮动、绝对定位、固定定位）

calc（）可以动态计算数值

2、高度自适应

盒子的高度由内容撑开

（1）不设置高度

（2）height：auto

最小高度 min-height
注意：IE6浏览器不识别min-height

兼容性：其他浏览器和IE7以上版本浏览器识别的是min-height，IE6和IE5识别的是height（相当于min-height）

解决兼容性：

（1）下划线过滤器（IE6或是IE6以下版本浏览器能识别）

_属性：属性值

（2）关键字过滤器（可以提升单独css的权重）

属性：属性值 !important

IE5和IE6不识别!important

（3）min-height:600px;

height:auto !important;

height:600px;

高版本浏览器全都识别，但是只有一二行起作用，值auto相当于没有设置高，所以实际上只有第一行起作用

IE低版本只有第三行起作用