Getting started with CSS layout

Elements and boxes

The concept often used in HTML is the element, but in CSS, the basic unit of layout is the box, which is always rectangular.

There is no one-to-one correspondence between elements and boxes. One element may generate multiple boxes. Pseudo-elements in CSS rules may also generate boxes. Elements with a display attribute of none will not generate boxes.

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

Box model

A box includes content, border, Padding, Margin(margin). The following figure shows the intuitive meaning of the box model:

The definition of the size (width and height) of the box is affected by the box-sizing attribute. Box-sizing can choose from three modes: content-box (default), padding-box and border-box.

Normal flow

The normal flow is the page, and most of the boxes are arranged in the normal flow. Boxes in the normal stream must be located in a certain formatting context. There are two formatting contexts in the normal stream: block formatting context (BFC) and inline formatting context (IFC).

In block-level formatting context, boxes are arranged vertically, and in inline formatting context, boxes are arranged horizontally.

The normal flow root container is a block-level formatting context. Different boxes may generate inline formatting context or block-level formatting context internally.

Block level and inline level

Boxes in the normal flow are divided into block level and inline level. No inline level box can be directly put into the block level formatting context. . If an

HTML element generates an inline box, and its context is block level, then an anonymous block level box should be generated for it. The anonymous block level box will generate an inline formatting context internally. . The display attribute of the

element will determine whether the box is inline level or block level:

• block, table, flex, grid, list-item is block level

• inline, inline-block, inline-table, inline-flex, inline-grid are inline levels

Formatting context

display may also determine how to display inside the element. The boxes generated by some container elements will generate formatting contexts other than BFC and IFC.

There is a class of boxes called block containers, which can contain block-level boxes. A block container either creates a block-level formatting context, so that it contains only block-level boxes, or an inline-level formatting context, so that it contains only inline-level elements. (That is to say, it is impossible for a block container to contain both block-level boxes and inline-level boxes. Once there are block-level boxes in its sub-box, all inline-level boxes will be automatically wrapped by anonymous boxes).

Block containers in non-block-level formatting contexts always create new block-level formatting contexts: such as display boxes generated for inline-blocks, table-cells, and table-captions. A block container that is also in a block-level formatting context will create a new block-level formatting context only if

overflow is not visible.

Absolute positioning and floating block containers always create a new block-level formatting context.

Elements whose display value is table or inline-table will generate a table, and a special formatting method will be used inside the table to arrange its internal elements.

Elements whose display value is grid or inline-grid will generate grid elements. Similar to the table situation, it also uses a special formatting method internally to mark its internal elements.

Elements with a display value of flex or inline-flex will generate an adaptive container (flex container), and the adaptive container will generate an adaptive formatting context (flex formatting context) inside it.

The above is the detailed content of Getting started with CSS layout. For more information, please follow other related articles on the PHP Chinese website!