Kidney Fun version CSS tutorial Chapter2 Box Model

Chapter 2 Box Model

Version	Update	Note
1.0	2016-5-31	Added for the first time. You are welcome to indicate errors in the comments, revise them as soon as they are verified, and indicate contributors.

1. Classification of elements

1.1 Replacing elements

The replacement element is the surrogate element, which occupies the other person, it is not an ordinary label, it represents some kind of component.

For example: <source><input><embed>

1.2 Non-replacement elements

Most elements are non-replacement elements.

Formally, the non-replacement element is a pair of tags, and the replacement element is a label.

1.3 Block level elements

Block-level elements wrap in the normal document stream. One row, not two blocks.

1.4 In-line elements

Inline elements do not wrap in the normal document stream.

1.5 Display

Display can be used to change the properties of an element.

2. Include Block

Many of the cases where the size is calculated as a percentage and the positioning problem involve the concept of containing blocks.

CSS2.1 defines a rule that contains blocks:

1. Elements of the root element and position:fixed, which contain blocks as Windows (viewport), also known as "initial containment blocks".

2. Positioned as relative and stalic elements, which contain blocks as parent elements.

3. The element that is positioned as absolute, which contains the most recent anchored ancestor element. If not, the containing block is the initial containing block.

3, block-level element box model

3.1 Overview

Box model is a series of calculation rules about dimensions.

For block-level non-replacement elements, there is a very important constraint rule:

Left and right margin+ around padding+ border+content width = content width of parent element.

Only the margin and width height can be set to auto, the calculated value is determined by the formula above.

Only the margin can be set to a negative value.

The vertical direction is the same.

non-replacement element
content
padding	Span style= "FONT-SIZE:16PX;" > > The performance is consistent around.
border
margin

3.2 Vertical Margin Merge

The margins in the adjacent vertical direction are merged (overlapping).

4. In-line element box model

Non-replacement elements
Content	Specifying a width height with width and height is invalid. The width is determined by the content, and the height is determined by the row height . Row heights are determined by the sum of line-height and replacement elements or inline-block longitudinal heights, including both internal and external margins and siding.
Padding	Upper and lower padding do not affect row height. Left and right padding will increase the total width.
Border	The left and right sides will display and occupy space, squeezing the adjacent content. The upper and lower sides are displayed, but not occupying space, but floating on top.
Margin	Left and right margin function, the margin does not work.

5. Inline-block Box Model

It is generally assumed that the substitution element behaves the same as the Inline-block, or that Inline-block is used to describe the replacement element.

Inline-block's dimensional calculations inherit the block's rules, and in the case of line wrapping, it inherits the attributes of the inline element.

Kidney Fun version CSS tutorial Chapter2 Box Model