《精通CSS》第八章——总结和补充

1. 让设计水平居中

- 固定宽度的元素，对其设置margin: 0 auto;

- 兼容性问题：IE 5.x 和 IE 6 不支持以上的方法，可以使用text-align：center；（但是对于其他文本需要重新设置text-align）

2. 基于浮动的布局

- 在html中，将主要的内容放在次要的内容前，尽管次要内容位于页面的左边

- IE浏览器中，会考虑内容的尺寸，而不是元素本身的尺寸。因此元素可能会随着内容的扩展而扩展。

- 为了防止本该在同一行的浮动元素变为两行，我们将左右两个元素分别向左向右浮动，并且在两个元素之间的间隙留出来。

3. 关于命名的问题

把主要内容区类名命名为primary，次要内容区类名命名为secondary。可以嵌套实现多次使用类名，并且名字的含义也很清晰。

4. 三列的浮动布局

运用两次两列的浮动布局方式即可。

5. 流式布局

尺寸用百分数设置。

- 设置min-width防止因为屏幕变小导致元素太窄，同理可设置max-width，以em为单位设置，保证可读性。

- 并且注意百分数是相对于父元素的百分数。

6. 弹性布局

相对于字号来设置元素宽度。

- 由于字号增大宽度会变宽，因此需要设置max-width防止出现水平滑动条

- 设置基字号

body{
    font-size: 62.5%;
}

- 技巧：只用em设置容器宽度，内部任然使用百分数，便于维护。

7. 流式和弹性的图片

-防止图片失真：设置max-width

8. faux列

??? 依旧没看懂

9. 高度相等的列

- 利用裁剪将三列裁剪到同样的地方，以内容最长的为基准

通过设置margin-bottom为负值，因此父元素裁剪溢出内容时，以最低的一个margin为准。