这几天看了一些简单的布局，刚开始看的时候，里面一些代码不要明白是什么意思，找找资料看看书问题一般就能解决了。也可能自己理解不是很深入吧，所以又深入看一看书多理解理解那些常用属性。
圣杯布局就是我遇到问题的一个方面，所以我要把我遇到的问题写下来，供大家参考了啊。
重点内容：margin的负值应用
圣杯布局
圣杯其实吧，就是网页中间内容部分的三列布局。一般有以下几点
1. 头部、中间内容区、页脚部分三大部分
2.头部和页脚部分高度固定，宽度自适应浏览器窗口宽度
3.中间内容区是三列布局：左右两边是固定高宽，中间一列宽度自适应
这次的实例是以浮动实现圣杯布局的。
第一步：创建三个主体div—页眉部分即网页的头部、中间主体部分以及页脚部分。
第二步：在中间主体部分再创建三个div别为middle、left、right
第三步：书写CSS代码—最重要的部分是让middle和left以及right在一行上显示
以下：
（1）设置中左右三部分向左浮动：
此时会发现中间部分在一行，左右栏在一行。
发现页脚也向上移动了，并且在right的右侧，这是footer自身受到浮动元素的影响了，需要清除自身的浮动：clear：both
（2）设置左边栏在cententer的最左边（右边栏right同理）：
设置left盒子的margin-left：-100%。middl、left和right没有显示一行中，这是因为中间栏设置的是自适应宽度，left栏没宽度可占据被挤到下一行显示，right紧跟其后。为了让left在cententer的最左边，需要让left盒子向左移动middle的宽度即：margin-left：-100%。
（3）右边栏在最右边显示：
右边栏在设置左外边距时，只需要向左移动左边栏的一个宽度：margin-left：-200px即可回到最右边的位置
（4）让middle的内容显示出来：
因为浮动的原因，left和right都在middle的上面，挡住middle的内容了，所以就需要设置cententer的内边距，为左右两栏留出位置
即设置cententer的padding-left：200px（左边栏的宽度）；padding-right：150px（右边栏的宽度）
设置完外边距后，此时左右栏并没有在最左和最右，因为子元素总是在父元素的内容区开始显示的。要想贴近contenter的padding边界，
还需要设置相对定位：
左边栏向左移动自身宽度值贴近contenter的padding边界—left：-200px
右边栏向左移动自身宽度值—left：-150px
注意：自适应的布局是随浏览器窗口大小而改变的，为了避免出现一些怪异现象都会为body设置一个最小宽度：min-width
源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圣杯布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
min-width: 500px;
background-color: antiquewhite;
}
#header{
width: 100%;
height: 100px;
background-color: coral;
}
#contenter{
width: 100%;
height: 300px;
/* 因为浮动的原因，left和right两栏均在中间栏的上面，所以中间栏的内容
会被遮挡住，故而设置padding值 把左右两栏的位置留出来
分别设置左右内边距的值为左右两栏的固定宽度值*/
padding-left: 200px;
padding-right: 150px;
}
#middle{
width: 100%;
height: 300px;
background-color: pink;
float: left;
}
#left{
width: 200px;
height: 300px;
/* 在设置浮动之后三栏应该在同一行上，因为中间栏是自适应宽度
所以left和right被挤到下一行，因而要设置left的margin-left为-100%
把left拉回到中间栏的最左侧 */
margin-left: -100%;
/* 这里设置相对定位是为了让左侧挡住的中间栏部分内容显示出来 */
position: relative;
left: -200px;
background-color: hotpink;
float: left;
}
#right{
width: 150px;
height: 300px;
margin-left: -200px;
position: relative;
left: -150px;
background-color: deeppink;
float: left;
}
#footer{
width: 100%;
height: 100px;
clear: left;
background-color: coral;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="contenter">
<div id="middle">middle</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="footer" class=clearfloat"">footer</div>
</body>
</html>
效果图
这个图更加清晰的介绍了如何布局，可以参考以下
下一个就是双飞翼布局楼咯！
517
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
