本文详细介绍了CSS的经典布局——圣杯布局和双飞翼布局，这两种布局均实现三栏结构，两侧固定宽度，中间自适应且优先渲染。圣杯布局通过content的padding、三栏的float和负margin实现；双飞翼布局则是在圣杯基础上，通过middle内center的margin调整。两种布局在实现上有相似之处，但也存在细微差别。
引言
圣杯布局和双飞翼布局都是比较经典的三栏布局，两种布局的页面效果基本相同。两种布局都是两侧宽度固定， 中间宽度自适应 且 中间内容优先渲染 的三栏布局。
圣杯布局
圣杯布局DOM结构
<header>this is the header</header>
<main>
<div class="center">this is the center</div>
<div class="left">this is the left</div>
<div class="right">this is the right</div>
</main>
<footer>this is the footer</footer>
内容区域main包含三个div标签，class分别为center、left、right。（顺序很重要，center一定要放到最前面，确保其优先渲染）
圣杯布局样式
第一步，将内容区域设置padding，为左右两栏留出空间。并设置内容区域的各栏宽度，中间栏宽度 100%，让其自适应，两边栏宽度固定。（宽 / 高根据实际情况设置，这是数值是为了演示方便）
main{
padding-left: 200px;
padding-right: 150px;
}
.center {
width: 100%;
height: 200px;
}
.left {
width: 200px;
height: 200px;
}
.right {
width: 150px;
height: 200px;
}
页面效果：
第二步，为三栏分别添加 float: left; （为了演示效果，添加了背景颜色）
修改后的CSS代码如下：
.center {
float: left;
width: 100%;
height: 200px;
background-color: orange;
}
.left {
float: left;
width: 200px;
height: 200px;
background-color: red;
}
.right {
float: left;
width: 150px;
height: 200px;
background-color: green;
}
页面效果：
第三步，通过 margin-left: -100%; 结合相对定位 right: 200px;，设置左边栏。
修改后的CSS代码如下：
.left {
float: left;
width: 200px;
height: 200px;
margin-left: -100%;
position: relative;
right: 200px;
background-color: red;
}
页面效果：
第四步，通过 margin-right: -150px，设置右边栏，完成圣杯布局。
修改后的CSS代码如下：
.right {
float: left;
width: 150px;
height: 200px;
margin-right: -150px;
background-color: green;
}
圣杯布局最终页面效果：
完整CSS代码：
body {
min-width: 550px;
}
header, footer{
height: 50px;
background-color: #ccc;
clear: both;
}
main{
padding-left: 200px;
padding-right: 150px;
height: 200px;
}
.center {
float: left;
width: 100%;
height: 200px;
background-color: orange;
}
.left {
float: left;
width: 200px;
height: 200px;
margin-left: -100%;
position: relative;
right: 200px;
background-color: red;
}
.right {
float: left;
width: 150px;
height: 200px;
margin-right: -150px;
background-color: green;
}
圣杯布局总结
- 第一步，将内容区域设置padding，为左右两栏留出空间；
- 第二步，给三栏添加浮动；
- 第三步，通过 margin-left: -100%; 结合相对定位 right自身宽度，完成左边栏；
- 第四步，通过 margin-right 负自身宽度，完成右边栏；
双飞翼布局
双飞翼布局DOM结构
<header>this is the header</header>
<main>
<div class="middle">
<div class="center">
双飞翼布局
</div>
</div>
<div class="left">this is the left</div>
<div class="right">this is the right</div>
</main>
<footer>this is the footer</footer>
main包含三个div标签，class分别为middle、left、right。其中middle包含一个class为center的div标签（和圣杯布局一样，为了确保middle区域优先渲染，将middle放在left、right之上）
双飞翼布局样式
第一步，给middle中的center，设置margin为左右两栏留出空间。（为了页面效果，也为其他区域添加了宽高以及背景颜色）
.center{
margin: 0 200px; //现在最重要的是理解这一行代码
height: 200px;
background: red;
}
//下面是其他区域的样式，不用细看，了解即可
main{
background: purple; //背景颜色：紫色
clear: both;
}
.left{
width: 200px;
height: 200px;
background: green;
}
.right{
width: 200px;
height: 200px;
background: yellow;
}
.middle{
width: 100%;
height: 200px;
background: pink;
}
.center{
margin: 0 200px;
height: 200px;
background: red;
}
页面效果：
第二步，同圣杯布局一样，为三栏分别添加 float: left;
修改后的CSS代码如下：
main{
background: purple;
clear: both;
}
.left{
float: left;
width: 200px;
height: 200px;
background: green;
}
.right{
float: left;
width: 200px;
height: 200px;
background: yellow;
}
.middle{
float: left;
width: 100%;
height: 200px;
background: pink;
}
.center{
margin: 0 200px;
height: 200px;
background: red;
}
页面效果：
第三步，给left添加 margin-left: -100%;设置左边栏。
修改后的CSS代码如下：
main{
background: purple;
clear: both;
}
.left{
float: left;
width: 200px;
height: 200px;
background: green;
margin-left: -100%;
}
.right{
float: left;
width: 200px;
height: 200px;
background: yellow;
}
.middle{
float: left;
width: 100%;
height: 200px;
background: pink;
}
.center{
margin: 0 200px;
height: 200px;
background: red;
}
页面效果：
第四步，给right添加 margin-left: -200px;，设置右边栏，完成双飞翼布局。
完整CSS代码：
header, footer{
height: 50px;
background-color: #ccc;
clear: both;
}
main{
background: purple;
clear: both;
}
.left{
float: left;
width: 200px;
height: 200px;
background: green;
margin-left: -100%;
}
.right{
float: left;
width: 200px;
height: 200px;
background: yellow;
margin-left: -200px;
}
.middle{
float: left;
width: 100%;
height: 200px;
background: pink;
}
.center{
margin: 0 200px;
height: 200px;
background: red;
}
双飞翼布局最终页面效果：
双飞翼布局总结
- 第一步，给middle中的center，设置margin为左右两栏留出空间；
- 第二步，同圣杯布局一样，给三栏添加浮动；
- 第三步，通过给left添加 margin-left: -100%; 完成左边栏；
- 第四步，通过给right添加 margin-left: -200px;，完成右边栏；
总结
圣杯布局 、双飞翼布局都使用float布局
圣杯布局 、双飞翼布局两侧都使用margin负值
为防止中间内容被两侧覆盖，圣杯布局使用的padding，双飞翼布局使用的是margin
结语
本小节到此就结束了，谢谢大家的观看！
如有问题欢迎各位指正
扫一扫
1464
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
