圣杯布局
圣杯布局和双飞翼布局都是常见的三栏布局，中间自适应，左右2边固定，中间提前渲染。
主要知识点
浮动 float
负边距 margin-left: -...
相对定位 position: relative
主要代码块
<div class="header">
<h4>这是一个开头</h4>
</div>
<div class="container">
<div class="main">
圣杯布局，很久之前就听过，但是一直都没详细了解过，本文是对它实现方式的一些总结，希望可以把这种技术推荐给跟我之前一样对它比较陌生的开发人员.
</div>
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer">
<h4>这是尾部</h4>
</div>
- 对header container footer设置相应的样式
.header{
height: 40px;
background: red;
}
.footer{
height: 40px;
background: green;
}
.container{
background: #000;
}
- 对main left right设置相应的样式
.main,.left,.right{
float: left;
}
.main{
width: 100%;
background: #35bbaa;
}
//这里就要注意了我们宽度等于父元素的宽度，所以下面的left，right就会由于没有位置向下一排浮动，所以就引发了接下来的负边距（前后摆放）
.left,.right{
width: 200px;
height: 200px;
}
.left{
background: #abcdef;
margin-left: -100%; //通过负边距把元素放到main的前面，值为main元素的宽度
}
.right{
background: #666;
margin-left: -200px; //通过负边距把元素放到main的后面，值为自身宽度
}
通过上诉方法我们实现了把三个元素当在同一行中，表面上看效果已经达到了自己的目的，但是我们在输入main中的文字就可以看到问题了，左右2个元素挡住了主要内容的左右部分，什么原因呢？这个就要我们理解浮动元素了，由于left，right设置了左右浮动，所以脱离文本流，所以文字会忽视他们的位置，填充进去了。为了解决这个时候就需要给父元素增加padding来缩小main元素的宽度
- 对container设置相应的padding和right,left值的改动
.container{
background: #000;
padding: 0 200px; //值为对应的left，right
}
//然后通过定位使left，right，main三个排到一行
.left{
background: #abcdef;
margin-left: -100%; //通过负边距把元素放到main的前面，值为main元素的宽度
position: relation;
left: -200px;
}
.right{
background: #666;
margin-left: -200px; //通过负边距把元素放到main的后面，值为自身宽度
position: relation;
right: -200px;
}
链接地址： 点击查看
以上就是圣杯布局的全部知识点
双飞翼布局
在2006年提出的圣杯布局上，淘宝由于需求在圣杯布局上提出了相应的修改（自古中国出盗版。。。。。）
主要修改内容是
- 给main元素添加了一个子元素
- 然后减少了
position:relation等定位这4条代码 - 给miain的子元素添加了一个
margin来缩小宽度
主要代码
<div class="header">
<h4>这是开头</h4>
</div>
<div class="container">
<div class="main">
<div class="layout">
双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。
多了1个div，少用大致4个css属性（圣杯布局中间divpadding-left和padding-right这2个属性，加上左右两个div用相对布局position: relative及对应的right和left共4个属性，一共6个；而双飞翼布局子div里用margin-left和margin-right共2个属性，6-2=4），个人感觉比圣杯布局思路更直接和简洁一点。
</div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer">
<h4>这是结尾</h4>
</div>
*{
padding: 0;
margin: 0;
}
.header,.footer{
height: 40px;
background: red;
}
.container{
background: #000;
}
.container:after{
display: block;
clear: both;
content: "";
}
.left,.right{
float: left;
width: 200px;
height: 200px;
}
.main{
float: left;
width: 100%;
background: #abcded;
}
.main .layout{
margin: 0 200px;
}
.left{
margin-left: -100%;
background: #666;
}
.right{
margin-left: -200px;
background: #acb;
}
本文章著作权归黄楚才，转载须说明来源
