圣杯布局和双飞翼布局

实现圣杯布局和双飞翼布局,“负边距”是必不可少的。

了解圣杯布局和双飞翼布局之前,我们先来了解下负边距。
一、定义:
负边距即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.浅析圣杯布局和双飞翼布局

版权归本人所有,若有转载,请注明来源。

推荐阅读更多精彩内容