圣杯布局和双飞翼布局
2019-03-16 本文已影响0人
不会潜水的猫小喵
1.圣杯布局
圣杯布局的来历是 Matthew Levine 在2006年发布在 A List Apart 上面的这篇文章：In Search of the Holy Grail，英文不好的人可以看这篇：寻找圣杯 In Search of the Holy Grail。
跟着步骤实现了一遍，对这种两边定宽，中间自适应的三栏布局的实现有了更深刻的认识，平时项目中有遇到，但是很少总结，写的也要复杂一些。但在不添加额外标签的情况下，这无疑是最简洁的实现方法。文章中最后提到给栏目加
padding 值来美化布局，对 padding 和 width 值都做了相应的调整，但是现在 css3 新增了 box-sizing 属性， 设置为
border-box 就可以解决问题。下面是主要代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>圣杯布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-width: 550px;
}
#header, #footer {
clear: both;
width: 100%;
height: 40px;
background: #999;
}
#container {
padding-left: 200px;
padding-right: 150px;
}
#container .column {
position: relative;
float: left;
padding: 10px;
height: 400px;
}
#center {
width: 100%;
background: #DCF1F6;
}
#left {
right: 200px;
margin-left: -100%;
width: 200px;
background: #FFFF00;
}
#right {
margin-right: -150px;
width: 150px;
background: #FF0000;
}
</style>
</head>
<body>
<div id="header">#header</div>
<div id="container">
<div id="center" class="column">
#center
</div>
<div id="left" class="column">
#left
</div>
<div id="right" class="column">
#right
</div>
</div>
<div id="footer">#footer</div>
</body>
</html>
2.双飞翼布局
关于双飞翼布局可以先看一下这两边文章了解一下：CSS布局之--淘宝双飞翼布局和双飞翼布局介绍-始于淘宝UED。
前面说到的圣杯布局有个问题，当面板的 center 部分比两边的子面板宽度小的时候，如果不给 body 设置 min-width，布局就会乱掉。双飞翼布局其实就是通过在圣杯布局的基础上多添加了一个标签克服了这个问题。把上面的代码稍作修改：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>双飞翼布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#header, #footer {
clear: both;
width: 100%;
height: 40px;
background: #999;
}
#container .column {
float: left;
height: 400px;
}
#center {
width: 100%;
background: #DCF1F6;
}
#center-inner {
margin-left: 200px;
margin-right: 150px;
padding: 10px;
}
#left {
padding: 10px;
margin-left: -100%;
width: 200px;
background: #FFFF00;
}
#right {
margin-left: -150px;
padding: 10px;
width: 150px;
background: #FF0000;
}
</style>
</head>
<body>
<div id="header">#header</div>
<div id="container">
<div id="center" class="column">
<div id="center-inner">
#center
</div>
</div>
<div id="left" class="column">
#left
</div>
<div id="right" class="column">
#right
</div>
</div>
<div id="footer">#footer</div>
</body>
</html>
总结
对比两种布局，不同之处主要在于：
1.双飞翼布局添加了一个子标签，通过 margin 给子面板腾出空间，解决了圣杯布局的问题。
2.双飞翼布局不用设置相对定位以及对应的 right 值。
相比之下，双飞翼布局更加简洁，兼容包括IE6在内所有的主流浏览器，响应式更好。
对于这种两端固定宽高，中间自适应的三栏布局，现在完全可以用 flex 弹性布局来实现，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>flex 弹性布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#header, #footer {
width: 100%;
height: 40px;
background: #999;
}
#container {
width: 100%;
height: 100%;
display: flex;
flex-flow:row nowrap;
justify-content:space-around;
}
#container > div {
padding: 10px;
height: 400px;
}
#center {
flex-grow:1;
background: #DCF1F6;
}
#left {
width: 200px;
background: #FFFF00;
}
#right {
width: 150px;
background: #FF0000;
}
</style>
</head>
<body>
<div id="header">#header</div>
<div id="container">
<div id="left" class="column">
#left
</div>
<div id="center" class="column">
#center
</div>
<div id="right" class="column">
#right
</div>
</div>
<div id="footer">#footer</div>
</body>
</html>
不过目前 flex 还是存在兼容问题，具体项目中需要采用哪种方式，根据项目的实际需求而定就好。
