The document discusses several topics related to the CSS box model: 1. It defines the box model as describing the rectangular boxes generated for elements and how they are laid out according to the visual formatting model. 2. It discusses how adjoining vertical margins can combine to form a single collapsed margin, but horizontal margins never collapse. 3. It explains that padding properties like padding-top and padding-bottom are calculated as a percentage of the containing block's width, not the element's width.

1. Box model
wenjuli(李文举)

2. - Box model
“The CSS box model describes the rectangular
boxes that are generated for elements in the
document tree and laid out according to the
visual formatting model.”

4. 如何创建
「
宽度为100%，
有左右padding、
有border的文本框
」？

5. - 嵌套 (IE6+) -

7. - box-sizing (IE8+) -

8. – 8.3.1 Collapsing margins
“In CSS, the adjoining margins of two or more
boxes (which might or might not be siblings) can
combine to form a single margin. Margins that
combine this way are said to collapse, and the
resulting combined margin is called a collapsed
margin.”

9. Adjoining vertical margins colla
Horizontal margins never collap

10. • Adjoining（毗邻）
• both belong to in-flow block-level boxes that
participate in the same block formatting context
• no line boxes, no clearance, no padding and
no border separate them (Note that certain zero-
height line boxes (see 9.4.2) are ignored for this
purpose.)
• both belong to vertically-adjacent box edges, i.e.
form one of the following pairs:(4种)

11. • contd.
• top margin of a box and top margin of its first in-flow child
• bottom margin of box and top margin of its next in-flow
following sibling
• bottom margin of a last in-flow child and bottom margin of
its parent if the parent has 'auto' computed height
• top and bottom margins of a box that does not establish a
new block formatting context and that has zero computed
'min-height', zero or 'auto' computed 'height', and no in-
flow children

14. 无 :before 有 :before overflow:hidden

15. 问：clearfix中添加:before有什么好处？
答：
① 避免top-margin collapse，与其他生成bfc的技术
保持视觉一致，如overflow:hidden;
② 与IE6/7的视觉保持一致，因为设置了zoom:1，
触发haslayout，top-margin是不collapse 的。

16. – Padding properties: <percentage>
“The percentage is calculated with respect to the
width of the generated box's containing block,
even for 'padding-top' and 'padding-bottom'. ”

17. Responsive background images
with fixed or fluid aspect ratios

20. 射射！