I. Box model

Each element can be viewed as a box, and the box model consists of four attributes: content, padding, margin, and border.

1. Content area

The content area is an integral part of the box model and has three attributes: width, height, and overflow. (The width and height attributes determine what kind of box model it is, explained at the end.) Overflow specifies how to handle overflow when content overflows the width or height of the area.

2. Inside margin

Padding refers to the space between the content area and the border. It has five attributes: padding-top, padding-bottom, padding-left, padding-right, and padding-right.

3. Margins

Margin refers to the distance between two boxes, which may be between child and parent elements, or between siblings, and has five attributes: Margin-top, margin-bottom, margin-left, margin-right, and margin can be negative, that is, offset in the opposite direction.

Margin is relative to the parent element when only the parent element exists; When there is a parent element and a sibling element, the element looks in all four directions to see if there is a sibling element. If there is a sibling element in that direction, the margin in that direction is relative to the sibling element, otherwise relative to the parent element.

4, border

This is the same as the border mentioned earlier.

Second, the width and height of the elements

Use the width and height attributes, where the width and height of inline elements do not take effect, depending on the content, only block level elements can be set width and height; To set the width and height of the inline element, set its display property to inline-block.

Short forms for padding and margin

Using padding as an example, there are three abbreviations:

padding:10px; padding:10px 5px; padding:1px 2px 3px 4px; Copy the codeCopy the code

The first line indicates that all four inner margins are 10px; The second line indicates that the top and bottom margins are 10px and the left and right margins are 5px; The third line indicates that the inner margins in the four directions of up, right, down and left are 1px, 2px, 3px and 4px respectively (clockwise).

Margin shorthand is the same.

Standard box model and IE box model

The width and height attributes of the standard box model refer to the width and height of the content, so the width of the standard box model = width (height) + padding + border + margin;

The width and height attributes of IE box model refer to the width and height of content, padding and border, so the width and height of IE box model = width (height) + margin;

Box-sizing: content-box; box-sizing: content-box; Box-sizing: border-box. The default property is Content-box.

Author: Like_Frost \