Understanding of the Box Model and understanding of the Box Model

Understanding of the Box Model and understanding of the Box Model

There are two types of box models: W3C and IE box models

The box model includes margin, border, padding, and content.

W3C element width = content width

IE element width = content + padding + border

 

I personally think that W3C defines the box model and IE defines the box model reasonably,

The width of the element should include border and padding. This is the same as our real-life box,

W3C also realized its own problems, so it added a style box-sizing in CSS3,

Contains two attributes: content-box and border-box.

 

Content-box: width = content + padding + border

Border-box: width = width (width specified by the style)

1. For row-level elements, margin-top and margin-bottom are invalid for upper and lower elements, and margin-left and margin-right are valid.

2. The value options of adjacent block-level elements margin-bottom and margin-top

1) All are positive numbers: Take the maximum distance = Math. max (margin-botton, margin-top)

2) Negative values: Take the minimum value and the distance = Math. min (margin-botton, margin-top)

3) above is a positive number, below is a negative number or above is a negative number, below is a positive number: Positive and Negative addition distance = margin-botton + margin-top