Getting Started with CSS layout (go)

Elements and Boxes

The concept that is often used in HTML is the element, whereas in CSS, the basic unit of the layout is the box, and the box is always rectangular.

Elements are not one by one corresponding to the box, an element may generate multiple boxes, the pseudo-elements in the CSS rules may also generate boxes, the Display property is none of the elements are not generated box.

In addition to elements, text nodes in HTML can also generate boxes.

Box model

A box includes content, border (border), padding (padding), margin (margin). Shows the visual meaning of the box model:

The size of the box (width and height) is defined by the Box-sizing property. box-sizing selectable Content-box (default), Padding-box and Border-box three modes.

Normal flow

The normal flow is the page, and most of the boxes are arranged in normal flow. The box in the normal flow must be in a formatted context, with two formatting contexts in the normal flow: block-level formatting context (block formatting context, abbreviation BFC), and inline formatting context (formatting context,ifc).

In the block-level formatting context, the box is vertically arranged, and the box is horizontally arranged in the inline formatting context.

The normal stream root container is a block-level formatting context, and different boxes may internally produce inline formatting contexts or block-level formatting contexts.

Block-level vs. inline-level

The boxes in the normal flow are divided into block-level and inline-level, and any one-row-level box cannot be placed directly into the block-level formatting context. If an HTML element generates an inline box and its context is block-level, an anonymous block-level box should be generated for it, and an anonymous block-level box will internally generate the inline formatting context.

The display property of an element determines whether the box is in-line or block-level:

• block, table, Flex, grid, List-item
• inline, Inline-block, inline-table, Inline-flex, Inline-grid for inline level

Formatting context

Display can also determine how the elements are displayed inside, and the boxes generated by some container-type elements produce formatting contexts outside of BFC and IFC.

There is a class of boxes called block containers, which can contain block-level boxes. A block container creates a block-level formatting context so that it contains only a block-level box, or creates a inline formatting context, so that it contains only inline-level elements within it. (That is, it is not possible to include both block-level boxes and inline-level boxes in a block container, and once a block box is in his sub-box, all inline boxes are automatically created with anonymous box parcels).

Block containers in a non-block-level formatting context always create new block-level formatting contexts: boxes such as display for Inline-blocks, Table-cells, and Table-captions. Instead of a block container in the block-level format context, a new block-level formatting context is created only if the overflow is not visible.

A block container that is absolutely positioned and floated will always create a new block-level formatting context.

An element with the display value of table or inline-table will generate a table (table), and the inside of the table will be arranged in a special format to arrange its inner elements.

An element with the display value of grid or Inline-grid will generate a grid element, similar to the table case, and it also uses a special formatting method to hand out its inner elements.

An element with display values of flex or Inline-flex will generate an adaptive container (Flex container), in which the adaptive container produces an adaptive formatting context (Flex formatting context).

Reprint Address: http://www.cnblogs.com/winter-cn/archive/2012/11/13/2768732.html

Getting Started with CSS layout (go)