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></div>

<div></div>

<div></div>

css样式如下：

.box-left{float:left;height:100%;width:200px;}

.box-right{float:right;height:100%;width:200px;}

.box-centert{height:100%;overflow:hidden;}