CSS Mastery摘要(2)--Visual Formatting Model Overview

If you set the box-sizingproperty to a value ofborder-box, as shown next, then thewidthand height properties will include the space required for the padding and borders of the box (see Figure3-3). Themargin still affects the overall size the element occupies on the page, but is still not included in the measurement given by thewidth.

Imagine a CSS box as being like a packing crate. The walls of the box act as a border and provide visual definition, while the padding goes on the inside to protect the contents. If the box needs to be a specific width, adding more padding or increasing the thickness of the walls eats into the available content space. Now if you need to space the boxes out before you stack them, the space between each box (effectively the margin) has no effect on the width of the box itself, or indeed the amount of available content space.

Block-level boxes will appear vertically one after the other; the vertical distance between boxes is
calculated by the boxes’ vertical margins.
Inline boxes are laid out in a line horizontally, following the text flow and wrapping to a new line when
the text wraps. Their horizontal spacing can be adjusted using horizontal padding, borders, and margins
(see Figure 3-6). However, vertical padding, borders, and margins will have no effect on the height of an
inline box. Similarly, setting an explicit heightorwidth on an inline box will have no effect either.
The horizontal box formed by one line of text is called a line box, and a line box will always be tall
enough for all the inline boxes it may contain. The only way you can alter the dimensions of a line box is
by changing the line height, or setting horizontal borders, padding, or margins on any inline boxes inside
it.

You can also set the display property of an element to beinline-block. As the name suggests, this
declaration makes the element line up horizontally as if it were an inline box. However, the inside of the
box behaves as though the box were block level, including being able to explicitly set width, height, vertical
margins, and padding.

When you use table markup (thetable,tr,thand tdelements, and so forth), the table itself behaves
as a block, but the contents of the table will line up according to the generated rows and columns. It is also
possible to set the display property of other elements so that they adopt the layout behavior of tables. By
applying the values table,table-row, andtable-cell in the correct way, you can achieve some of the
properties of an HTML table without using tables in the markup.

A similar thing happens with the line boxes of text inside a block-level element. Say you have a
paragraph that contains three lines of text. Each line of text forms an anonymous line box.

Margin collapsing may seem strange at first, but it actually makes a lot of sense. Take a typical page
of text made up of several paragraphs (see Figure 3-11). The space above the first paragraph will equal the
paragraph’s top margin. Without margin collapsing, the space between all subsequent paragraphs will be the
sum of their two adjoining top and bottom margins. This means that the space between paragraphs will be
double the space at the top of the page. With margin collapsing, the top and bottom margins between each
paragraph collapse, leaving the spacing the same as everywhere else.

The concept of what gives an element itscontaining blockis important because it decides how various
properties are interpreted, like the case with paddingandmargin set in percentages that we saw earlier.
The containing block of an element depends on how the element is positioned. If the element has
a static position (same as no position property declared) or a relative position, its containing block is
calculated to the edges of its nearest parent that has a displayproperty set to something that causes a blocklike context, includingblock,inline-block,table-cell,list-item and so forth.
By default, declarations of width,height,margin, andpaddingare calculated from the dimensions
of this parent element when set in percentages. This changes when you change the element to have a
positioning model of absolute or fixed.

An absolutely positioned element’s containing block is its nearest positioned ancestor, meaning any
ancestor element that has the position property set to anything other thanstatic. If the element has no
positioned ancestors, it will be positioned in relation to the root element of the document, thehtmlelement.
This is also known as the initial containing block.

Fixed positioning is a subcategory of absolute positioning. The difference is that a fixed element’s containing
block is the viewport. This allows you to create floating elements that always stay at the same position in the
window.

A floated box can be shifted either to the left or the right
until its outer edge touches the edge of its containing block or another floated box.

Its width will also
shrink to the smallest width needed to contain its content, unless you’ve explicitly told it otherwise by setting
a particular width ormin-width/max-width.

If a floated element is
followed by an element in the flow of the document, the element’s box will behave as if the float didn’t exist.
However, the textual content of the box retains some memory of the floated element and moves out of the
way to make room. In technical terms, a line box next to a floated element is shortened to make room for
the floated element, thereby flowing around the floated box. In fact, floats were created to allow text to flow
around images

To stop line boxes from flowing around the outside of a floated box, you need to apply aclearproperty
to the element that contains those line boxes. The clearproperty can beleft,right,both, ornone, and it
indicates which side of the box should not be next to a floated box. Many people think theclearproperty
simply removes some flag that negates the previous float. However, the reality is much more interesting.
When you clear an element, the browser adds enough margin to the top of the element to push the element’s
top border edge vertically down, past the float (see Figure 3-19). This can sometimes be confusing when you
try and apply your own margin to “cleared” elements, because the value will have no effect until it reaches
and goes beyond the value added automatically by the browser.

clearing an element essentially clears a vertical space for all the preceding floated elements. This can
be useful when using floats as a layout tool, as it allows surrounding elements to make space for floated
elements.

Formatting Contexts
inline formatting context
block formatting context

Some rules allow elements to establish their own, internal block formatting contexts. These include the
following:
• Elements whose display property is set to a value that creates a block-like context
for the contents of the element, like inline-blockortable-cell.
• Elements whose float property is anything butnone.
• Elements that are absolutely positioned.
• Elements that have theoverflowproperty set to anything butvisible.