<CSS设计指南> 学习总结 -- 页面布局

布局的基本概念

多栏布局有三种基本的实现方式：固定宽度、流动、弹性

1. 固定宽度：该布局的大小不会随用户调整浏览器窗口大小而变化，一般是900到1100像素宽。其中960像素是最常见的，因为这个宽度适合所有现代显示器，而且能够被16、12、10、8、6、5、4和3整除，不仅容易计算出等宽分栏的数量，而且计算结果也能得到没有小数的像素数。

2. 流动： 布局的大小会随着用户调整浏览器窗口大小而变化。这种布局能够更好地适应大屏幕，但同时也意味着放弃对页面某些方面的控制，比如随着页面宽度变化，文本行的长度和页面元素之间的位置关系都可能变化。、、

3. 弹性： 弹性布局与流动布局相似，在浏览器窗口变宽时，不仅布局变宽，而且所有内容元素大小也会变化，让人产生一种所有东西都变大了的改进，但是到太过复杂，目前还没有设计的很好的弹性布局

布局宽度与布局高度

布局高度：多数情况下，布局中结构化元素(乃至任何元素)的高度都是不必设定的，事实上，甚至根本不应该给元素设定高度，除非必要，比如在页面中创造一个绝对定位的元素。保持元素height属性为默认值auto的原因是，只有这样元素才能随自己包含内容的增加而在垂直方向上扩展。

布局宽度：与高度不同，我们需要更精细地控制布局高度，以便随着浏览器窗口宽度的合理变化，布局能够作出适当的调整，确保文本行不会过长或过短。注意，即使必须设置栏宽，也不要给包含在其中的内容元素设定宽度，应该让这些内容元素自动扩展到填满栏的宽度，这是块级元素的默认行为。总之，就是让栏宽限制其中内容元素的宽度。