一、自适应
1、宽度自适应
块元素不设置宽度或是块元素设置宽度100%,块元素的宽度占满整个父级的宽度。
(1)不设置width(块元素是占位置,元素类型没有受影响)
(2)width:100%(元素类型受影响,脱离文档流,设置浮动、绝对定位、固定定位)
calc()可以动态计算数值
(1)使用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低版本只有第三行起作用