一、圣杯布局
首先给出一个基本的结构
HTML代码:
<html>
<head>
<title>圣杯布局</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">header</div>
<div class="content">
<div class="middle">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
加上CSS样式：
*{
margin: 0;
padding: 0;
}
.header{
background-color: aquamarine;
}
.middle{
width: 100%;/*设置为100%，让他始终占满窗口，才会有自适应的效果，使middle随浏览器窗口大小改变。*/
background-color: bisque;
}
.left{
width: 200px;
background-color: pink;
}
.right{
width: 200px;
background-color: yellow;
}
.footer{
width: 100%;
background-color: blueviolet;
}
middle
设置为100%，让他始终占满窗口，才会有自适应的效果，使middle随浏览器窗口大小改变。
此时效果是这样的：
给
left
、
right
、
middle
加上浮动：
float:left
此时浮动导致父元素content高度塌陷
清除浮动：
.clear::after{
content: "";
display: block;
clear: both;
}
我们要把content中的三个元素放在一行
margin-left设置为负值时，表示当前元素的左边界向左移动。
left
中加入
margin-left:-100%;/*-100%表示向左移动他的父元素content的宽度，这一行不能容纳，
于是就移动到了上一行，刚好middle的左边界与left的左边界重合*/
right
中加入
margin-left:-200px;/*left移动之后，right的左边界就到了他所在这一行的左边。
因为right200px宽，所以让他向左移200px，刚好使它的右边界与middle的右边界重合*/
从这里开始与双飞翼区别
这个时候已经实现了两边宽度不变，中间随浏览器改变。
但是为
middle
添加内容，我们会发现存在一个bug。
这是因为浮动之后，脱离了文档流，两边固定的宽度就会挡住内容。要想不被遮挡，可以为content加
padding
将middle往中间收缩。
.content{
padding: 0 -200px;
}
那么两边已经空出了区域，这是将两边宽度移回去就行了。
用position将元素移回去
left:
position: relative;
left: -200px;/*在原有位置上向左移动*/
right:
position: relative;
left: 200px;
最后不要忽略一个问题
页面的最小宽度：如果调整浏览器窗口的大小，使得中心栏比左栏小，那么在符合标准的浏览器中，布局就会中断。所以最小left+middle+right=600
body{
min-width: 600px;
}
二、双飞翼布局
双飞翼与圣杯大体相同，主要是在对于两边宽度会遮挡middle那里的处理方式不同。
middle
中添加
inner
<div class="middle">
<div class="inner">middle Lorem ipsum dolor sit amet consectetur adipisicing elit. A ullam molestias vel repellendus veritatis non quos esse iure commodi, quod explicabo quia. Porro laborum ullam modi atque eveniet nulla ducimus?</div>
</div>
为
inner
添加内边距。
.content .inner{
padding: 0 200px;
}
三、二者异同
圣杯布局与双飞翼布局实现的效果是一样的，即：
两边宽度不变，中间的部分会随浏览器窗口大小而改变。
相同点
-
middle
- 都利用负的
margin-left
-
middle
的宽度设置为100%。
（处理遮挡文字以上的部分都相同）
不同点
- 圣杯布局为
middle
padding
middle
position
- 双飞翼布局是在
middle
inner
inner