前言
所谓经典，说白了就是古老的东西，但是又是很有用的东西。大多数前端，还有本菜，都或多或少了解的圣杯布局和双飞翼布局。
本文只对这两种布局进行简单的探讨(毕竟本菜真的好菜啊)
不管怎样，写作的好处自然很多，可以巩固自己的知识，弘扬程序猿一贯的乐于分享的精神，也望日后能有温故而知新的效果。
概述
虽然两种布局名称不一样，但圣杯布局和双飞翼布局效果是一致的，都是三列布局，都是中间宽度自适应，左右宽度为定值的布局，且都是让浏览器将中间区块优先渲染。
效果图如下：
图1
两种布局采用的策略
1. 圣杯布局:
html结构
<div id="container">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
1.1 父容器container设置左右margin 以容纳左右两列，container的width不设置，自适应
1.2 三列都设置左浮动，center块设置width为100%，占满父容器宽度；
1.3 然后利用浮动元素设置margin为一定负值时会跳到上一行的特性（注意：如果前面的元素不是浮动元素，负margin是不会起到跳到上一行的效果的），将左边列的margin-left设置为-100%，也就是父容器的宽度，即center那列的宽度，将right块的margin-left设置为负的right块的宽度，比如right块的宽度为100px,则设置margin-left为-100px；
1.4 设置左边列和右边列position为relative，并设置左边列的left为负的左边容器留白的宽度，设置右边列的right为容器右边留白的宽度
2. 双飞翼布局
html结构
<div id="container2">
<div class="center2">
<div class="wrap">center2</div>
</div>
<div class="left2">left2</div>
<div class="right2">right2</div>
</div>
2.1 设置container2的width为100%
2.2 设置center2、left2和right2左浮动，center的width为100%；
2.3 设置left2 的margin-left为-100%，right2的margin-left为right2的宽度的负数
2.4 设置wrap 的左右margin分别为left2和right2的宽度，适当留出一点间隙，width不设置为自适应
完整实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局双飞翼布局</title>
<style>
*{
margin: 0;
padding:0;
}
body{
text-align: center;
}
/*圣杯布局*/
#container{
padding:0 210px;
overflow: hidden;
font-size: 30px;
}
.left,
.center,
.right{
float: left;
}
.center{
width:100%;
height: 50px;
background: blue;
}
.left{
position:relative;
left: -210px;
width:200px;
height: 100px;
margin-left: -100%;
background: red;
}
.right{
position: relative;
right: -210px;
width: 200px;
height: 100px;
margin-left: -200px;
background: green;
}
/*双飞翼布局*/
#container2{
width:100%;
}
.left2,
.right2,
.center2{
float: left;
}
.center2{
width:100%;
/*height: 200px;*/
}
.center2 .wrap{
height: 200px;
margin-left: 210px;
margin-right: 210px;
background: #392;
}
.left2{
width:200px;
height: 100px;
background: red;
margin-left: -100%;
}
.right2{
width:200px;
height: 100px;
background: blue;
margin-left: -200px;
}
</style>
</head>
<body>
<h2>圣杯布局</h2>
<div id="container">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<br><br>
<h2>双飞翼布局</h2>
<div id="container2">
<div class="center2">
<div class="wrap">center2</div>
</div>
<div class="left2">left2</div>
<div class="right2">right2</div>
</div>
</body>
</html>
效果：
图2
讨论两种布局的区别
从html上看，双飞翼布局多了一个标签
从css上看，明显地双飞翼布局的css代码更少
而且，圣杯布局暴露出一个问题：
图3
这个图为浏览器窗口缩小到一定大小的时候，圣杯布局出现排版错乱的现象，原因是圣杯布局的中间那块宽度是自适应的，浏览器缩小到中间的那块宽度小于左右两块时，左边的那块margin-left不足以跑到上一行，因此出现了排版错乱的现象。解决的办法为container 设置min-width为左右两块的宽度较大者。但是，这样看来，明显是使用双飞翼布局更优。本人推荐用双飞翼布局的方式。
网友评论