精通CSS-高级web标准解决方案（第2版）--读书笔记06-CSS布局

第八章 布局

CSS布局概念是重中之重，要做好一个网页，首先应该考虑它的布局。要想创建可伸缩容易维护的CSS系统，要检查设计，寻找重复的模式，在这个阶段，不要关注表现方式，要注意结构和意义。

一、计划布局

总结思想：先整体后深入，先结构后内容，先一般后特殊，先定义后添加。

首先要设计结构！

• 先把页面划分为大的结构性区域，比如容器、页眉、内容区域和页脚。
• 然后关注内容区域，建立网格等结构。同样，要寻找内容区域共同的特征，一般来说，独特的内容区域只有几个。
• 最后，在各个内容区域中寻找不同的布局结构。是否需要把信息分为两列、三列或四列？不过布局结构大多灵活使用。

结构设计完后，才关注内容！

• 首先要查看不同类型的内容。要给每个内容块起一个有意义的名称，然后分析它们的关系，把相似的内容块归类。例如新闻稿和公告可以组合成一个内容类型。
• 查看每个内容块的结构，看看不同的类型中是否有共同的模式。尽量采用一般的类名，然后根据上下文应用样式（上下文？）。例如，文章和新闻稿都有醒目的页眉和页脚，可以加上相应的标识。
• 以上确定命名约定后，开始定义将使用的元素。提前定义元素比随时添加元素容易的多，还可以记下颜色编码、尺寸等信息，可以在设计稿上添加批注。

二、设置结构

假设要开发一个典型的三列博客模板，现在要用一个容器让设计居中，其中包括页眉、内容区域、页脚。

使用外边距让容器在屏幕上居中：
1、定义容器div的宽度：可以用像素px,百分比，或者em。
2、将水平外边距设置为auto：margin: 0 auto;