css自适应布局

2021-05-07 11:29

阅读：702

标签：百分比 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结构有所变化，代码如下：

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

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：css自适应布局
文章链接：http://soscw.com/index.php/essay/83661.html

亲，登录后才可以留言！