CSS box model - standard box, weird box

1. Concept

The CSS box model is a mental model used by CSS techniques that are often used in web design.

1. All elements in the webpage have the following four attributes (used to layout elements) :

• content, the width and height of the element
• padding inner margin
• border border
• margin margin

2. There are two types of box models:

• The first is the W3C standard box model (standard box model)
• The second IE standard box model (weird box model)

2. The difference between the width and height of the standard box model and the weird box model

1. In the standard box model width, heightit refers to contentthe width and height of the content area

The size of the box under the standard box model = width (content) + padding + border + margin

2. In the weird box model width, heightit refers to content + padding + borderthe width and height

The size of the box under the weird box model = width ( content + border + padding ) + margin

Three, CSS3 box-sizing

1. Function: box-sizing The attribute is used to switch the box model

2. box-sizingThe common attributes of:

• box-sizing: content-boxIs the W3C standard box model (default property)
• box-sizing: border-boxIs the IE weird box model
• box-sizing: inheritSpecifies that the value of the attribute should be inherited from the parent element box-sizing.