css box model related settings

The default box-sizing attribute of the box model is content-box. After setting the width or height, it only refers to the width and height of the content, while the widths such as margins and inner borders are superimposed on the content width and height.

 

Size calculation formula:

width= width of content

height= height of content

The calculated values ​​of width and height do not include the border and padding of the content. In order to avoid generating magic values ​​during layout, the properties are generally changed to border-box, which includes content, padding and borders, but does not include margins. See the link below for detailed examples: 

In order to make the entire layout convenient, use the following code before the style sheet to make the entire box model use border-box (IE box model)

In order to ensure that third-party components do not destroy the entire layout, the inherit keyword is used for forced inheritance.

:root{
box-sizing:border-box;
}
*,
::before,
::after{
box-sizing:inherit;
}

box-sizing - CSS (Cascading Style Sheets) | MDN The box-sizing property in CSS defines how the user agent should calculate the total width and height of an element. https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing