CSS2 Layout Models 学习

一、盒模型（Box Layout Model）

1. box的范围：content + padding + border + margin，即为该元素的父元素的content area的范围
2. 背景包括 content + padding + border，如果border设置为dotted之类时，背景会显示在gaps里
3. 只有 margin 可以设置为负值
4. 只有 margin, width, height 可以设置为 auto
5. 垂直的两个相邻的 margin 合并为一个 margin， 计算方法为 Max(positive margins) - Max(Abs(negative margins))
6. 水平的 margin 不合并
7. floated or positioned elements' margins 从来不合并，不论垂直或水平的 margin

二、行内模型（Inline Layout Model)

1. 我觉得“内联”用在这里不合适，inline其实就是说在一行上，行内模型似乎还说得过去
2. content 区域是用 font-size定义的
3. half-leading，由 ((font_size - line_height)/2) 定义
4. inline box 的高度永远和它的 line-height相等
5. 一行的所有inline box 都在一个 line box之中，这个line box的上边缘和下边缘由它内部所有 inline box 的最高边缘和最低边缘决定
6. 一个line box的上边缘紧接着上一个line box的下边缘，或者父元素的inner top edge（即父元素的content的上边界）；下边缘也类似。
7. 一行之内的inline box之间的对齐由 vertical-align 决定
8. 实际上每个字符都有自己的 inline box ，但连续的字符的font-size和line-height一般都是一样的，所以可以将一串字符看做一个 inline box
9. inline box 可以定义自己的 padding, border 等box属性, ，但是 inline box 的 padding, border 等属性不影响包含其的 line box 的高度（line box的高度只由inline box的content area决定）
10. 对于 non-replace inline elements （如仅包含文本的元素）来说 top/bottom margin 不会起任何作用（因为它无法影响到line box高度的计算）
11. 用户可以通过设置来忽略对inline元素的top/bottom padding的设置（还没看到怎么设置，以后补上-_- btw:inline box的padding会让背景作用的区域发生变化）
12. 对于 replaced elements（如文本中有图片），inline box 的高度包括了padding,border和margin，这样就会影响到line box的外观

在MSDN里看到了IE的盒模型，尽管不是标准，但还是放在这里学习一下吧