Now that you have a clear understanding of the CSS box model, you should also
make yourself familiar with what??™s commonly called the Internet Explorer 5 box
model (p. 156).
Containing Block
CSS rendering comprises the tasks of laying out and rendering numerous boxes.
Element boxes are positioned within a formatting context, which, by default, is
provided by the box generated by a parent element.
When we specify the positions or dimensions of element boxes, we??™re doing so
relative to what??™s known as the containing block, which is a very important concept
in CSS layout.
The containing block for the root element is called the initial containing block, and
has the same dimensions as the viewport (p. 141) for continuous media (such as the
screen) and the page area for paged media (such as print).
The containing block for any other element box is determined by the value of the
position property for that element.
If the value of the position property is static (the default) or relative, the
containing block is formed by the edge of the content box of the nearest ancestor
element whose display property value is one of:
?– block
?– inline-block
?– list-item
?– run-in (only in a block formatting context; see Formatting Concepts (p.
Pages:
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226