css自适应布局

标签：百分比   bfc   body   布局   变化   center   高度   css样式   样式   

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;}

css自适应布局

标签：百分比   bfc   body   布局   变化   center   高度   css样式   样式   

原文地址：https://www.cnblogs.com/wanghao1994/p/12089487.html