随着css3的普及，我们前端开发人员在绘制页面的时候有了更省时省心省力的方式。就比如要实现一个左、中、右的三列布局，我们有不下于五种的解决方案，flex布局、表格布局、Grid布局以及今天我们要将到的圣杯布局和双飞翼布局。
圣杯布局和双飞翼布局解决的问题是相同的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。
一、圣杯布局
1、布局原理
圣杯布局中，我们主要使用到了负margin并结合relative相对定位,同时也涉及到了float脱离文档流排版布局的相关知识。为了让中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。
<style>
#bd{
padding: 0 200px 0 180px;
height: 100px;
}
#middle{
float: left;
width: 100%;
height: 500px;
background:blue;
}
#left{
float:left;
width:180px;
height:500px;
margin-left:-100%;
background: #0c9;
position: relative;
left: -180px;
}
#right{
float: left;
width: 200px;
height: 500px;
margin-left: -200px;
background: #0c9;
position: relative;
right: -200px;
}
</style>
<div id="bd">
<div id="middle">middle</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
注意负margin的使用，.left射者了margin-left:-100%,这里的100%是指负元素的width,因为父元素#bd的width是auto自适应屏幕，所以.left元素就会直接向左移动到#bd元素的的最左端，注意：不是屏幕的最左端，然后我们又给.left元素添加了.relative和left想对定位元素，所以.left自然就左移到屏幕的最左边了！对于.right元素位置分析，可以采用相同的分析方法。
那么，为什么我们要设置负margin呢？因为,.left,.middle,.right均设置了float:left,所以它们三个元素都会脱离文档流，但是仍然排在同一层文档上面，所以左右要通过负margin进行位置的移动。
还有一点需要注意的就是HTML代码结构的顺序，.middle一定要排在.left,.right的上面，这是整个布局逻辑的基础，重要指数5颗🌟。
2、优缺点
优点：不需要添加dom节点。
缺点：圣杯布局的缺点：正常情况下是没有问题的，但是特殊情况下就会暴露此方案的弊端，如果将浏览器无线放大时，「圣杯」将会「破碎」掉。如图：当middle部分的宽小于left部分时就会发生布局混乱。（middle<left即会变形，这个您需要脑补一下，一般人也不会这么操作的）
二、双飞翼布局
双飞翼布局是淘宝团队提出来的一种布局，是圣杯布局的改进，通过给.middle添加一个子节点.inside来防止页面被放大之后，页面的错乱。其缺点就是多增加了一层div。
<style>
#center{
float:left;
width:100%;/*左栏上去到第一行*/
height:100px;
background:blue;
}
#left{
float:left;
width:180px;
height:100px;
margin-left:-100%;
background:#0c9;
}
#right{
float:left;
width:200px;
height:100px;
margin-left:-200px;
background:#0c9;
}
/*给内部div添加margin，把内容放到中间栏，其实整个背景还是100%*/
#inside{
margin:0 200px 0 180px;
height:100px;
}
</style>
<div id="center">
<div id="inside">middle</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
双飞翼布局理解起来比较简单，如果你能够理解圣杯布局，那么理解双飞翼布局就完全不在话下。此处就不在进行多余的解释，至于其优缺点，前面已经介绍过了。如果您有时间，可以使用Grid网格布局实现，相关资料可以查看阮一峰老师的《Grid布局》。
最后感谢您的阅读。祝您学习进步！
网友评论