css常用布局
一、单列布局
单列布局长这个样子，主要有两种：普通单栏，通栏的单栏布局
clipboard.png
1、普通单栏
比较简单，设置 定宽 + 水平居中即可
<style>
.layout{
width: 960px;
margin: 0 auto;
}
#header{
height: 60px;
background: red;
}
#content{
height: 400px;
background: blue;
}
#footer{
height: 50px;
background: yellow;
}
</style>
<div id="header" class="layout">头部</div>
<div id="content" class="layout">内容</div>
<div id="footer" class="layout">尾部</div>执行结果链接描述 浏览器宽度超过960px时，外margin出现。
clipboard.png
当收缩浏览器宽度，小于960px时，margin为0，出现滚动条。
clipboard.png
2、通栏
<style>
.layout{
width:600px;
border:1px solid black;
margin:0 auto;
}
.header{
background:#ccc;
height:60px;
}
.content{
background:yellow;
height:160px;
}
.footer{
background:pink;
height:60px;
}
</style>
<div class="header">
<div class="layout">header</div>
</div>
<div class="content layout" > content</div>
<div class="footer">
<div class="layout">footer</div>
</div>执行结果链接描述 在header 和footer上再包裹一层div，在外层的div上添加背景颜色，设置内层layout上设置左右margin：auto，就出现了通栏的效果。实际上layout占据的位置是固定的，如下图border框出的位置。
clipboard.png
当浏览器宽度收缩的时候，也会出现滚动条。
clipboard.png
二、双列布局
一列固定宽度，另外一列自适应宽度。通过float+margin实现
clipboard.png
#content:after{
content: '';
display: block;
clear: both;
}
.aside{
width: 200px;
height: 500px;
background: yellow;
float: left;
}
.main{
margin-left: 210px;
height: 400px;
background: red;
}
#footer{
background: #ccc;
}
</style>
<div id="content">
<div class="aside">aside</div>
<!-- 最重要的是执行顺序，要先放aside，再写content。因为content是普通的块级元素，如果先执行content，就会占据一整行，aside就只能向下浮动。如果先执行aside，由于有左margin，就正好可以放的下-->
<div class="main">content</div>
</div>
<div id="footer">footer</div>执行结果链接描述 1、最重要布局的时候浮动元素要放在前面，要先放aside，再写content。因为content是普通的块级元素，如果先执行content，就会占据一整行，aside就只能向下浮动。 如果先执行aside，由于有左margin，就正好可以放的下 2、注意使用后清除浮动
clipboard.png
三、三列布局
两侧两列固定宽度，中间列自适应宽度。通过设置aside 左右float+左右margin实现
<style>
.aside{
background:yellow;
float:left;
height:400px;
width:100px;
}
.aside2{
background:blue;
float:right;
height:400px;
width:100px;
}
.main{
background:pink;
margin:0 110px 0 110px;
height:300px;
}
.footer{
background:#ccc;
}
.clearfix::after{
content:'';
display:block;
clear:both;
}
</style>
<div class="content clearfix">
<div class="aside">aside</div>
<div class="aside2">aside2</div>
<div class="main">main</div>
</div>
<div class="footer">footer</div>执行结果：链接描述
clipboard.png
四、水平等距排列
<style>
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
.ct{
width: 640px;
border:dashed 1px orange;
margin: 0 auto;
}
.ct .item{
float:left;
margin-left: 20px;
margin-top: 20px;
width:200px;
height:200px;
background: red;
}
.ct>ul{
margin-left: -20px; //最重要的是负margin是在ul上设置
}
.clearfix::after{
content:" ";
display:block;
clear:both;
}
</style>
<div class="ct clearfix">
<ul>
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
<li class="item">6</li>
<li class="item">7</li>
<li class="item">8</li>
</ul>
</div>
</div>执行结果链接描述 左右没有margin
clipboard.png
五、flex布局
关于flex这三篇文章，写得比较好 Flex 布局教程：实例篇 Flex 布局教程：语法篇 深入理解 flex-grow & flex-shrink & flex-basis
六、圣杯布局
1、起因
三列布局中，一般两边是广告，中间是实际内容。要求中间内容元素在 dom 元素次序中处于优先位置。所以普通的三栏布局就用不了，必须要用更复杂的方式来实现。
2、原理（浮动+负margin+绝对定位）
- 1、给main，aside，extra都设置为浮动，main设置宽度为100%
- 2、设置aside负margin-left为100%（相当于向左移动一个父元素的宽度），将aside移动到main的左边
- 3、设置extra负margin-left为150px（extra的宽度），将extra移动到main的右边
- 4、为了避免main的内容被extra和aside遮挡。给content设置左padding为100px，右padding为150px，给extra和aside腾出位置
- 5、最后使用position：relative，将extra和aside分别移动到两边
3、遇到的坑
设置负margin和width为百分比，计算的基数都是父元素的宽度 负margin使用较难掌握，使用前可以看一下这篇负margin的原理的文章
<style>
#content:after{
content: ''; /*8*/
display: block; /*8*/
clear: both; /*8*/
}
#content{
padding-left: 100px; /*5*/
padding-right: 150px; /*5*/
}
.aside, .main, .extra{
float: left; /*2*/
}
.aside{
width: 100px; /*1*/
height: 300px; /*1*/
background: red; /*1*/
margin-left: -100%; /*4*/
position: relative; /*6*/
left: -100px; /*6*/
}
.extra{
width: 150px; /*1*/
height: 300px; /*1*/
background: yellow; /*1*/
margin-left: -150px; /*5*/
position: relative; /*7*/
left: 150px; /*7*/
}
.main{
height: 350px; /*1*/
background: blue; /*1*/
width: 100%; /*3*/
}
</style>
<div id="content">
<div class="main">main</div>
<div class="aside">aside</div>
<div class="extra">extra</div>
</div>执行结果链接描述
七、双飞翼布局（浮动+左右margin+负margin）
demo 原理：双飞翼的布局和圣杯是很相似的，不同的是双飞翼在main内部再嵌套了一层wrap。用wrap设置左右margin，代替content设置padding和绝对定位。
<style>
#content:after{
content: ''; /*8*/
display: block; /*8*/
clear: both; /*8*/
}
#content{
}
.aside, .main, .extra{
float: left; /*2*/
}
.aside{
width: 100px; /*1*/
height: 300px; /*1*/
background: red; /*1*/
margin-left: -100%; /*4*/
}
.extra{
width: 150px; /*1*/
height: 300px; /*1*/
background: yellow; /*1*/
margin-left: -150px; /*5*/
}
.main{
/* background: blue; */ /*第1步添加，第7步注释掉*/
/* height: 350px; */ /*第1步添加，第7步注释掉*/
width: 100%; /*3*/
}
.wrap{
margin-left: 100px; /*6*/
margin-right: 150px; /*6*/
background: blue; /*7*/
height: 350px; /*7*/
}
</style>
<div id="content">
<div class="main">
<div class="wrap">main</div>
</div>
<div class="aside">aside</div>
<div class="extra">extra</div>
</div>执行结果
clipboard.png
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-11-14，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录