Box-sizing of CSS

Box model is a very important concept in CSS, it involves nothing but content, padding, border, margin. But from the above two diagrams, we can see that there are two types of box models: the standard box model.And IE box models.

IE box model”

box-sizing: border-box;

IEThe width composition of the box model is content + 2 * padding + 2 * border

For example, if you set the width of a div to 200 px, the width of the div content is actually only 200 PX minus the value of padding and border. Its actual width is less than or equal to 200px.

comparative summary

1. box-sizing: content-box | border-box | inherit
2. The main difference is that the width package does not contain border and padding.
3. box-sizing The default value is content-box, that is, the default box model.