Deep understanding of the box model, deep understanding of the Model

Deep understanding of the box model, deep understanding of the Model
Directory [1] width and height [2] padding [3] margin [4] Front of the border

All document elements generate a rectangular box, called an element box, which describes the space occupied by an element in the document layout. In addition, each box affects the position and size of other element boxes.

Width and height

In CSS, you can set an explicit height for any block-level element. If the specified height is greater than the height required for the displayed content, the extra height will produce a visual effect, just like an extra padding. If the specified height is less than the required height of the displayed content, A scroll bar is added to the element. If the height of the element content is greater than the height of the element box, the actual behavior of the browser depends on the overflow attribute.

Width and width are defined as the distance from the left inner boundary to the right inner boundary.

Height is defined as the distance from the top boundary to the bottom boundary.

[Note] the width and height cannot be applied to non-replacement elements in the row and cannot be negative.

Width/height

Value: <length >|< percentage> | auto | inherit

Initial Value: auto

Applied to: block-level elements and replacement Elements

Inheritance: None

Percentage: relative to the width/height of the contained block

Calculated value: for auto and percentage values, the value is determined according to the specified value; otherwise, it is an absolute length, unless the element cannot apply this attribute (auto at this time)

<Weird box model>

IE6-the width and height of the browser define the size of the visible element box, rather than the content area size of the element box.

 

Padding

For an element in the row, the left padding applies to the beginning of the element, and the right padding applies to the end of the element. The upper and lower padding does not affect the Row Height.

[Note] the padding cannot be a negative value.

Padding

Value: [<length >|< percentage>] {1, 4} | inherit

Initial Value: Undefined

Apply to: All elements

Inheritance: None

Percentage: relative to the width of the contained block

 

Margin

When you set the margin, additional white space is created outside the element. The blank space usually indicates the area where other elements cannot be placed, and the background of the parent element can be seen in this area.

The outer margin can be applied to the element in the row. The upper and lower margins have no effect on the row height. Since the top and bottom margins are actually transparent, this statement has no visual effect. The left margin is applied to the beginning of the element; the right margin is applied to the end of the element.

Margin

Value: [<length >|< percentage> | auto] {} | inherit

Initial Value: Undefined

Apply to: All elements

Inheritance: None

Percentage: relative to the width of the contained block

<Order of values>

[1 value] margin: top | right | bottom | left; [2 values] margin: top | bottom left | right; [3 values] margin: top left | right bottom; [4 values] margin: top right bottom left;

 

Merge vertical margins

Adjacent sibling element outer margin merge, also known as outer margin superposition

Include parent-child element margin merge, also known as margin Transfer

When the border or padding is set on the contained block, the outer margin of its child elements is contained in the contained block, which prevents the passing of the outer margin.

 

Negative margin

If both vertical margins are set to negative values, the browser selects the maximum value of the absolute values of the two margins. If a positive margin is combined with a negative margin, the absolute value of this negative margin is subtracted from the positive margin.

 

 

Border

The element's outer margin is the border of the element. The border of the element is one or more lines around the padding of the element content. The border consists of three parts: coarse line, style, and color.

For an element in a row, the border is actually drawn on the next pixel outside the row. Because each row is close to each other, its border overlaps. No matter how wide the border is set for the element in the row, it does not affect the Row Height. However, the left and right borders are displayed at the beginning and end of the element respectively.

The detailed information about the border is now

div{    width: 200px;    border: 1px solid red;}    span{    border: 1px solid black;    background-color: yellow;    padding: 6px;        margin: 6px;    font-size: 30px;    line-height: 50px;}

<Div> <span> test text </span> </div>