css自适应布局

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

相关推荐

囧芝麻 / 0评论 2019-12-20