实现圣杯布局和双飞翼布局，“负边距”是必不可少的。
了解圣杯布局和双飞翼布局之前，我们先来了解下负边距。
一、定义：
负边距即margin属性的值设为负值，在CSS布局中是一个很有用的技巧。
- 当margin-top、margin-left为负值的时候，会把元素上移、左移，同时文档流中的位置也会发生相应的变化，这点与position:relative的元素设置top、left后元素还占据原来位置不同。
- 当margin-bottom、margin-right为负值的时候，元素本身没有位置变化，后面的元素会上移、左移。
二、负边距在布局中的作用：
1.对于普通的文档流，示例如下：
我们为上例中的一些元素添加<pre>margin:-10px;</pre>
效果如下：
我们可以看到：绿色的块状元素向左和向上分别嵌入浏览器窗口的边界里10px，下面的蓝色块状元素也向上向左分别移动了10px.
2.对于浮动元素
下面有三个浮动的块级元素box,如下：
如果给它们均设置<pre>margin-right:-50px;</pre>
效果如下：
后面的元素叠加到了前面的元素
如果给第三个元素设置了<pre>margin-left:-80px;</pre>
效果如下：
此时第三个元素遮挡了第二个元素的一部分
如果给第三个元素设置<pre>margin-left:-100px;</pre>
效果如下：
此时第三个元素完全盖住了第二个元素
知道了这些，我们就来看看圣杯布局和双飞翼布局。
三、圣杯布局
实现原理：
html代码中，将重要的内容main放在container的最前面，然后是aside,extra
1.将三者均设置<pre>float:left;</pre>
2.将main的宽度设置为
<pre>width:100%;</pre>使得main沾满一行；
3.将aside放到main所在行的最左边，给aside设置<pre>margin-left:-100%;</pre>
4.aside覆盖了main内容的最左端，此时给container添加<pre>padding:0 100px;</pre>
5.使aside填充container最左边的空白部分，为aside添加<pre>left:-100px;</pre>
6.同理先给extra添加<pre>margin-left:-100px;</pre>再给extra添加<pre>left:100px;</pre>
按照上述步骤，我们就可实现圣杯布局了，大功告成！
奉上代码吧：
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>圣杯布局</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
html,body{
margin:0;
padding:0;
}
.container{
border:1px solid;
padding:0 100px;
width:500px;
}
.container:after{
content:'';
display: block;
clear:both;
height: 0;
}
.main{
width:100%;
height:300px;
background-color: red;
float:left;
}
.aside{
width:100px;
height:100px;
background:blue;
float:left;
position: relative;
left:-100px;
margin-left:-100%;
}
.extra{
width:100px;
height:100px;
float:left;
background:yellow;
position: relative;
left:100px;
margin-left:-100px;
}
</style>
</head>
<body>
<div class="container">
<div class="main"></div>
<div class="aside"></div>
<div class="extra"></div>
</div>
</body>
</html>
</pre>
四、双飞翼布局
实现原理：
html代码中，将重要的内容main放在container的最前面，然后是aside,extra
1.将三者都设置<pre>float:left;</pre>
2.main占满一行，设置<pre>width:100%;</pre>
3.将aside移动到main的最左端，为aside设置<pre>margin-left:-100%;</pre>
4.将extra移动到container的右侧，为extra设置<pre>margin-left:-100px;</pre>
5.main的一部分被extra和aside盖住了，给main中添加<pre><div class="wrap"></div></pre>的子元素，然后设置<pre>margin:0 110px;</pre>
按照以上步骤，即可实现双飞翼布局。
上代码吧：
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>双飞翼布局</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
html,body{
margin:0;
padding:0;
}
.container{
border:1px solid;
width:500px;
}
.container:after{
content:'';
display: block;
clear:both;
height: 0;
}
.main{
width:100%;
height:300px;
float:left;
}
.main .wrap{
background:pink;
height:300px;
margin-left: 100px;
margin-right: 100px;
}
.aside{
width:100px;
height:100px;
background:blue;
float:left;
margin-left:-100%;
}
.extra{
width:100px;
height:100px;
float:left;
background:yellow;
margin-left:-100px;
}
</style>
</head>
<body>
<div class="container">
<div class="main">
<div class="wrap"></div>
</div>
<div class="aside"></div>
<div class="extra"></div>
</div>
</body>
</html>
</pre>
五、总结下二者的异同
1.两种布局方式都是把主列放在文档流最前面，使主列优先加载；
2.两者在实现上的相同点在于都让三列浮动，然后通过负外边距形成三列布局；
3.两种布局方式的不同在于如何处理中间主列的位置：圣杯布局是利用父容器的左右内边距定位；双飞翼布局是把主列嵌套在div后利用主列的左右外边距定位。
参考：
1.CSS布局奇淫巧计之-强大的负边距
2.CSS布局 -- 圣杯布局 & 双飞翼布局
3.神奇的负边距
4.负margin用法权威指南
5.浅析圣杯布局和双飞翼布局
版权归本人所有，若有转载，请注明来源。
网友评论