概念:能够根据设备类型和尺寸、自动调整页面效果,以达到显示一个比较正常的布局效果。
1.宽度自适应
1.不设置宽度
2.使用百分比
3.使用最大最小宽度
min-width:*px; 设置最小宽度 【版心外面的盒子】
max-width:*px; 设置最大宽度 【响应式】
2.高度自适应
1.不设置高度。
注意:如果子元素浮动,会脱离文档流,造成高度塌陷,所以需要清除浮动,解决这个问题。
清除浮动 | 解除塌陷的方式:
方式1:
1.给浮动元素的最后面添加一个空的div,并给他一个类名clear <div class='clear'></div>
2.给该元素设置唯一的样式 .clear{clear:both; }
方式2:
1.给浮动元素的父亲添加类名clearfix
2.设置样式
.clearfix:after{ //在该元素的内容后面添加一个伪元素
display:block; //伪元素的类型是块级元素
content:''; //元素的内容为空的
clear:both; //清除前面兄弟的浮动
height:0; //处理低版本兼容的
}
.clearfix{ zoom:1; } //IE6清除浮动的
方式3:
1.给浮动元素的父亲添加样式 overflow:hidden; 【有作弊嫌疑】
2.使用百分比
注意:如果要实现一屏页面,需要先加
html,body{
width:100%;
height:100%;
}
3.使用最大最小高度
min-height:*px; 设置最小高度 【响应式】
max-height:*px; 设置最大高度 【响应式】