巩固前端09--圣杯布局

发表于 | 分类于 ， ， ， | 本文总阅读量 次
字数统计: 1.5k | 阅读时长 ≈ 6

圣杯布局

圣杯模型

圣杯模型就是分为三栏，中间一栏用来渲染自适应，左右两侧两栏是固定宽度。有三种办法可以实现三栏左右两栏宽度固定，中间自适应。

绝对定位法

左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。

HTML代码：

1
2
3
4
5
<body>
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</body>

CSS代码为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style type="text/css">
body{margin:0;
     height:100%;}

.left,.right{
	position:absolute;
	top:0px;
	width:200px;
	height:100%;
}

.left{
	left:0;
	background-color:green;
}

.right{
	right:0;
	background-color:blue;
}

.main{
	margin:0 210px;
	background-color:black;
	height:100%;
}

HTML代码中的三个div顺序是可以调换的，这与其他两种方法就不同了。
此方法的优点是，理解容易，上手简单，受内部元素影响而破坏布局的概率低，就是比较经得起折腾。
缺点在于：如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况。

margin负值法

这种方法是在实际的网站中应用的最多的。
步骤一：给出HTML结构

1
2
3
4
5
6
7
<header><h4>头部</h4></header>
<div class="container">
<div class="middle"><h4>中间弹性区</h4></div>  
<div class="left"><h4>左边栏</h4></div>  
<div class="right"><h4>右边栏</h4></div>
</div>
<footer><h4>底部</h4></footer>

写结构的时候要注意，父元素的的三栏务必先写中间盒子。因为中间盒子是要被优先渲染。并且设置其自适应，也就是width:100%。
步骤二：给出每个盒子的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
header，footer{
	width: 100%;
	height: 40px;
	background-color: darkseagreen;
}

.container{
    height:200px；
    overflow:hidden;
}

.middle{
	width: 100%;
	height: 200px; 
	background-color: deeppink;
	float:left;
}

.left{ 
	width: 200px;
	height: 200px;
	background-color: blue;
	float:left;
}

.right{
	width: 200px;
	height: 200px;
	background-color: darkorchid;
	float:left;
}

此时的效果是三栏并没有在父元素的一行显示，左右两个盒子才会被挤下来，就是因为中间盒子我们给了百分之百的宽度。
那么如何让它们呈现出一行三列的效果呢？那就要让左边的盒子要到中间盒子的最左边，右边的盒子到中间盒子的最右边。换个想法，如果中间盒子不是100%的宽度，那么按照文档流，左边的盒子一定会在中间盒子的后面显示，接着显示右边的盒子。但是现在中间盒子是满屏了的，所以左右两个盒子被挤到下一行显示。我们要做到的是让左右两个盒子都上去。此时，CSS的负边距(negative margin)该上阵了。

步骤四：利用负边距布局
1、让左边的盒子上去
需要设置其左边距为负的中间盒子的宽度，也就是.left {margin-left:-100%;}。这样左盒子才可以往最左边移动。
2、让右边的盒子上去
需要设置其左边距为负的自己的宽度，也就是.right {margin-left：-200px;}。这样右盒子才可以在一行的最右边显示出自己。

步骤五：让中间一栏自适应调整
我们现在的确是硬性的实现了固比固布局。但是要记住，中间盒子是自适应的宽度，所以中间盒子里的内容会被左右盒子给压住一部分。这样的后果就是当我们在中间一栏写的内容非常多的时候，可能会有一部分内容被压在了左右两边两栏下面不能显示出来。所有我们现在要设置让中间一栏自适应调整。
首先，利用父级元素设置左右内边距的值，把父级的三个子盒子往中间挤。代码如下：

1
2
3
.container{ 
	padding: 0 200px;
}

这里的200px是左右盒子的宽度。这样的话，在页面的左右两边就留出来了左右两栏宽度的空白，用来存放两栏内容。
左右两边的内边距是有了，但是中间盒子上的内容还是被压着。
其次，给左右两个盒子加一个定位，加了定位之后左右两个盒子就可以设置left和right值。
代码如下：

1
2
3
4
5
6
7
8
.left{ 
	position: relative; 
	left: -200px;
}
.right{
	position: relative;
	right: -210px;
}

现在，圣杯布局终于搞定了，也实现了我们要的效果，左右侧的盒子固定，中间盒子自适应，而且中间盒子的内容完全不受影响。
此方法的优点：三栏相互关联，可谓真正意义上的自适应，有一定的抗性——布局不易受内部影响。
缺点在于：相对比较难理解些，上手不容易，代码相对复杂。出现百分比宽度，过多的负值定位，如果出现布局的bug，排查不易。

自身浮动法

此方法代码最简单。应用了标签浮动跟随的特性。左栏左浮动，右栏右浮动，主体直接放后面，就实现了自适应。

HTML代码结构如下：

1
2
3
4
5
<body>
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</body>

CSS代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style type="text/css">
body{margin:0;
     height:100%;}

.left,.right{
	width:200px;
	height:100%;
}

.left{
	float:left;
	background-color:green;
}

.right{
	float:right;
	background-color:blue;
}

.main{
	margin:0 210px;
	background-color:black;
	height:100%;
}

这里三个div标签的顺序的关键是要把主体div放在最后，左右两栏div顺序任意。
此方法的优点是：代码足够简洁与高效
不足在于：中间主体存在克星，clear:both属性。如果要使用此方法，需避免明显的clear样式。

-------------本文结束感谢您的阅读-------------