CSS设计指南（页面布局）
布局的基本概念 多栏布局有三种基本的实现方案：固定宽度、流动、弹性。
- 固定宽度布局的大小不会随用户调整浏览器窗口大小而变化，一般是900 到1100像素宽。其中960 像素是最常见的，因为这个宽度适合所有现代显示器，而且能够被16、12、10、8、6、5、4 和3 整除，不仅容易计算等宽分栏的数量，而且计算结果也能得到没有小数的像素数。流行的CSS 布局框架960 Grid（http://www.960.gs），就是基于960 像素宽的网格创建的。
- 流动布局的大小会随用户调整浏览器窗口大小而变化。这种布局能够更好地适应大屏幕，但同时也意味着放弃对页面某些方面的控制，比如随着页面宽度变化，文本行的长度和页面元素之间的位置关系都可能变化。Amazon.com 的页面采用的就是流动中栏布局，在各栏宽度加大时通过为内容元素周围添加空白来保持内容居中，而且现在的导航条会在布局变窄到某个宽度时收缩进一个下拉菜单中，从而为内容腾出空间。今天，越来越多的浏览器都支持CSS 媒体查询了。这就让基于浏览器窗口宽度提供不同的CSS 样式成为可能。在这种形势下，适应各种屏幕宽度的可变固定布局，正逐步取代流动布局。这种可变的固定布局能够适应最大和最小的屏幕，业界称之为响应式设计。
- 弹性布局与流动布局类似，在浏览器窗口变宽时，不仅布局变宽，而且所有内容元素的大小也会变化，让人产生一种所有东西都变大了的感觉。到目前为止，我还没见过设计得非常好的弹性布局，主要是因为它太过复杂了。
布局高度
多数情况下，布局中结构化元素（乃至任何元素）的高度是不必设定的。事实上，我甚至想告诉你根本不应该给元素设定高度。除非你确实需要这样做，比如在页面中创造一个绝对定位的元素。
为什么正常情况下都应该保持元素height 属性的默认值auto 不变呢？很简单，只有这样元素才能随自己包含内容的增加而在垂直方向上扩展。这样扩展的元素会把下方的元素向下推，而布局也能随着内容数量的增减而垂直伸缩。假如你明确设定了元素的高度，那么超出的内容要么被剪掉，要么会跑到容器之外——取决于元素overflow 属性的设定。
布局宽度
与高度不同，我们需要更精细地控制布局宽度，以便随着浏览器窗口宽度的合理变化，布局能够作出适当的调整，确保文本行不会过长或过短。如果随意给元素添加内边距、边框，或者元素本身过大，导致浮动元素的宽度超过包含元素的布局宽度，那浮动元素就可能“躲”到其他元素下方。
当然啦，即使必须设定栏宽，也不要给包含在其中的内容元素设定宽度，应该让这些内容元素自动扩展到填满栏的宽度。本书前面已经讲过了，这是块级元素的默认行为。简言之，就是让栏宽限制其中内容元素的宽度。
三栏-固定宽度布局
HTML5 Template - 锐客网 * {
margin: 0;
padding: 0;
}
#wrapper {
width: 960px;
margin: 0 auto;
border: 1px solid;
}
header {
background: #f00;
}
nav {
width: 150px;
float: left;
background: #dcd9c0;
}
nav li {
list-style-type: none;
}
article {
width: 600px;
float: left;
background: #ffed53;
}
aside {
width: 210px;
float: left;
background: #3f7ccf;
}
footer {
clear: both;
background: #000;
}标题如图5-2 所示，把两栏容器元素的总宽度设定为外包装的宽度（150 + 810 = 960）， 并浮动它们，就可以创造出并肩排列的两栏来。每一栏的长度取决于内容多少。采 用同样的方法，可以添加第三栏（或任意多个栏）。文本
文章图片
为栏设定内边距和边框 只要一调整各栏中的内容，布局就可能超过容器宽度，而右边的栏就可能滑到左边的栏下方。一般来说，两种情况下可能会发生这种问题。
- 为了让内容与栏边界空开距离，为栏添加水平外边距和内边距，或者为了增加栏间距，为栏添加外边距（只要开始给布局添加样式，就一定会采用这里说的一种做法，甚至双管齐下），导致布局宽度增大，进而浮动栏下滑。换句话说，右边浮动的栏因为没有足够的空间与其他栏并列，就会滑到左边栏的下方。
- 在栏中添加大图片，或者没有空格的长字符串（如长URL），也会导致栏宽超过布局宽度。同样，这种情况下右边的栏也会滑到左边的栏下方。
为固定宽度的元素添加水平外边距、边框和内边距，会导致元素盒子变宽好在，我们也有三种方法来预防该问题发生。
- 从设定的元素宽度中减去添加的水平外边距、边框和内边距的宽度和。
- 在容器内部的元素上添加内边距或外边距。
- 使用CSS3 的box-sizing 属性切换盒子缩放方式，比如section {box-sizing:border-box; }。 应用box-sizing 属性后，给section 添加边框和内边距都不会增大盒子，相反会导致内容变窄。
直接给栏应用内边距会导致内容变窄，但不会影响布局。听起来容易
的办法总会有一个“但是”，这里的“但是”要说的是IE6 和IE7 不支持box-sizing
属性。不过，有一个专门解决这个问题的腻子脚本（polyfill），名叫borderBoxModel.js。
你可以使用条件注释（以便只有IE6 和IE7 加载）把它添加到HTML 标记之后、结
束的
