CSS Visual Design Model (1) block box (Boxex) and inline box (boxes)

Include block (cotaining Blocks)

In CSS2.1, many of the box's positioning and size are calculated based on the edge of a rectangular box called a block containing containing blocks. In general, the generated box acts as the containing block of its descendants box, and we call the box "create" the containing block for its descendants. to say "box contains a block" is to say "box contains the block" instead of the containing block produced by box.

Each box is given a position relative to its containing block, but it is not confined to its containing block; it may overflow.

< Div > < Table > < TR >< TD >hi</td></tr></ Table > </ Div >

As above, the DIV and table are all containing blocks. The div is the containing block of the table, and the table is the containing block of the TD.

Block-level elements (Block-level Elements) and block boxes (blocks Boxes)

block-level elements (block-level Element): A block box is generated to contain the child box and the generated content.

Block Box: It is also a block box (containing boxes) that contains either a block boxes or a inline box (line boxes).

Anonymous Block Box (Anonymous block boxes):

< DIV > Some Text < P > More text </ DIV >

As above, the div appears to contain inline (in-line) content and block boxes, in fact, according to CSS rules, in the some text around is an anonymous block box, so that the div block box contains only the Block box.

In other words: if a block box (like the box generated for Div in the previous example) contains another block box (as in the previous example, p), then we force it to contain only the block box. Therefore, the above "Some text" is forced to be added to an anonymous block box.

Inline elements (Inline-level Elements) and in-line boxes (Boxes)

inline Element (Inline-level Elements): refers to an element that can be lined up, allowing other elements to be left and right, a,img,b and so on.

Inline Boxes: An inline element generates a inline box.

Anonymous inline box (Anonymous inline Boxes)

< P > < EM >emphasized</em> text</P> 

As above, the P element generates a block box with several inline boxes inside it. The "emphasized" box is an inline box that produces an inline element (<em>), while the other boxes ("Some" and "text") are the inline boxes produced by the block-level element (P). The latter is called the Anonymous inline control box because they have no inline elements associated with them, so these boxes are called anonymous inline boxes.

Display Properties

• Block : The element creates a block box.
• Inline-block: The element produces an inline-level block box. The interior of the inline block box is formatted as a block, and the element itself is formatted as a inline-level box.
• Inline: The element produces one or more inline boxes.
• None: The element does not come out of the formatting structure (that is, the element neither produces a box nor affects the layout). Its descendant elements also do not produce any boxes: the element and its contents are completely removed from the formatting structure. The display attribute of ' none ' does not generate an invisible box; it does not generate a box at all. CSS includes mechanisms that enable an element to generate a box in a formatted structure that affects formatting, but is not visible by itself (visible feature).

I'm on the block boxes and the inline boxes

• If there is a block-level element in a box (boxes), then the contents of this box will be formatted as a block box, because as soon as the block-level elements appear, the contents of the content will be divided into chunks, each of which is exclusively a single line.
• If there is no block-level element in a box (boxes), the contents of this box are formatted as inline boxes because the contents are arranged in order.

CSS Visual Design Model (1) block box (Boxex) and inline box (boxes)