Understanding of CSS3 box model

Understanding of CSS3 box model

All HTML elements can be viewed as boxes. In CSS, the term "box model" is used for design and layout.
The CSS box model is essentially a box that encapsulates the surrounding HTML elements. A box is composed of 4 parts: content, padding, border, and margin.
There are two types of box models: the standard box model and the IE box model, which are standards developed by W3C and IExplore.

If you set a style for an element

.box {
    
    
    width: 200px;
    height: 200px;
    padding: 10px;
    border: 1px solid #eee;
    margin: 10px;
}

1. Standard box model: the actual size of the box = content (set width/height) + padding + border,

so the width of the content of the .box element is 200px, and the actual width is width + padding-left + padding- right + border-left-width + border-right-width = 200 + 10 + 10 + 1 + 1 = 222.

2. IE box model: the actual size of the box = set width/height = content + padding + border. The

actual width occupied by the box element is 200px, while the actual width of the content is width - padding-left - padding- right-border-left-width-border-right-width = 200 - 10 - 10 - 1 - 1 = 178.

Summary:
At present, high-level browsers basically use the standard box model by default, while old antiques like IE6 use the IE box model by default.
A new attribute box-sizing is added in CSS3, which allows developers to specify what standard the box uses. It has 2 values:
content-box: standard box model;
border-box: IE box model;