nicepainkiller 2019-12-24
css自适应布局可以分为以下几种:
1、宽度全部100%,高度自适应页面
布局时候的要点是计算出划分的版块在设计图中所占的百分比,要注意提前将html,body{height:100%;}
2、两栏(左右) 三栏(双飞翼布局)
这两种布局方法是从左往右依次排开,方法如下:
1、触发BFC规则
两栏:先将左边的一栏宽度固定,右边的高度自适应宽度不适应,设置一个overflow:hidden(因为BFC规定:bfc区域和float是不会重叠的)
.left{float:left;height:100%;width:200px;}
.right{height:100%;overflow:hidden;}
三栏:同前面的两栏布局一样,但是html结构有所变化,代码如下:
<div class="box-left"></div>
<div class="box-right"></div>
<div class="box-center"></div>
css样式如下:
.box-left{float:left;height:100%;width:200px;}
.box-right{float:right;height:100%;width:200px;}
.box-centert{height:100%;overflow:hidden;}