第五章 基本的页面布局
时间：2010-09-25 来源：heartofrong
1.在页面布局中创建分栏的基本手段有两种：浮动布局和绝对定位布局
浮动布局实现简单，但是要确保分栏的总宽度不能超过布局宽度，否则右侧的分栏会被挤下去。不过，通过组合使用overflow属性和“内部div”（四章中有提到），可以解决这个问题。推荐使用浮动布局方法！！
绝对定位布局不会产生断裂的情况，但是由于分栏采取绝对定位，它们之间也就没有任何关系了。这样就难以创建流动式布局，而且页脚也不会自动向下推。虽然通过js可以解决。
2.简单的两栏式布局
html框架：
<body>
<div id=”main_wrapper”>
<div id=”header”>
<div id=”header_inner”>
</div>
</div>
<div id=”nav”>
<div id=”nav_inner”>
</div>
</div>
<div id=”content”>
<div id=”content_inner”>
</div>
</div>
<div id=”footer”>
<div id=”footer_inner”>
</div>
</div>
</body>
一个大div包含四个小div，每个小div还包含一个内部div。使用内部div可以极大的简化为布局添加样式和修改布局的工作量，通过内部div可以解决在为分栏应用外边距、边框、内边距时，经常会遇到的盒模型的问题。对带有关键性宽度的元素，作者倾向于为它们嵌套一个内部div。
CSS规则：
body {
text-align:center //for ie6
}
#main_wrapper {
840px; //总的宽度
margin-left: auto; //在浏览器中居中布局，下同
margin-right: auto;
text-align:left; // fore ie6
}
#header{
}
#nav {
22%;
float:left; //浮动
}
#content {
78%;
float:left; //浮动，只要这两者的宽度之和为100%，配合overflow属性，就能做到固定的浮动布局
top:0px;
}
#footer {
clear:both;//清除，否则会挤占nav下面的空白
}
#header_inner, #nav_inner, #content_inner, #footer_inner {
overflow:hidden; //隐藏过大元素
}
#header_inner {
padding:1em 2em;
}
#nav_inner {
padding:1em .8em;
border-right:3px solid #833
}
#content_inner {
padding:0 1em 1em 1.5em;
}
#footer_inner {
padding:.5em 1em;
text-align:center;
}
overflow属性是为了防止由于过大的内容导致布局分裂而设置的，有时候，也可能需要移除在div上设置的overflow属性。
3.简单的两栏流动式布局
上面的布局方式对不同大小的屏幕无法做出适应性的调整，因此，创建能够适应任意屏幕大小的流动式布局对用户而言会更加友好。
对2的修改：
#main_wrapper {
840px; //总的宽度
margin-left: auto; //在浏览器中居中布局，下同
margin-right: auto;
text-align:left; // fore ie6
max-; //添加最大和最小宽度，但是IE6不支持这两个属性，需要添加额外的js
min-;
}
#nav {
22%;
;nav的宽度固定为140px
float:left; //浮动
}
#content {
78%; //width的默认值为auto，这也是内容分栏保持流动的条件。
float:left; //浮动， 只要这两者的宽度之和为100%，配合overflow属性，就能做到固定的浮动布局 取消浮动，否则由于width的长度同main_wrapper一致而
top:0px; 导致宽度不够，内容分栏会被挤到下面
margin-left:140px；// 为内容分栏添加140px的左外边距，如果没有这一条，则content会挤占nav下面的空间，不过貌似问题也不大（书上说会出现重合的情况，但我觉得应该和文字环绕图像的情况差不多）
}
4.三栏固定宽度布局
跟两栏差不多
5三栏流动式布局
threecolwrap：浮动（貌似不是必须吧），宽度100%。包含twocolwrap栏和promo栏
twocolwrap：浮动，宽度100%，margin-right：-170px，包含nav栏和content栏
nav：浮动，宽度-150px
content：宽度auto（默认），不浮动（原因同两栏流动），margin-left：150px，margin-right：170px
promo：浮动，宽度170px
最关键的是两栏的margin-right为负数，同时设置content的右外边距170px，这样可以让出右边的170px，欺骗浏览器右边还有170px的空间让promo浮上来。
还有一个关键的属性display，举例：float元素后跟一块级元素，如果块级元素的没有浮动，则它们的左上角位置会重合（当然，其中的内容并不重合）。如果块级元素的display设置成inline，则它们的位置就不会重合（有待进一步确认）。
6.设计长度相同的分栏
上面的几种布局，各个分栏的长度是不一样的（因为其中的内容多少不一样，内容多的会自动向下推，内容少的则固定长度），有两种方法可以做到分栏长度相同
- 人造分栏：为布局的背景添加一副与分栏具有相同颜色的图像，设置repeat-y属性和方向属性（right或者left），比较简单，但要保证图片宽度和分栏宽度一致。
- 编程方式扩展div：当页面加载后，通过js找到其中最长分栏的高度，然后将其他分栏的高度也设置为相同
7.绝对定位布局
书上说绝对定位布局时页脚必须放在content中，否则页脚无法自动向下推。我自己也试了下，貌似不行，不过有点想不通，为什么用一个relative的div包含中间三个栏后，后面的页脚不能显示？
相关阅读 更多 +
