Css layout learning notes-box-sizing

When you set the width of the element, the actually displayed element can go beyond your setting, because the border and padding of the element will open the element.

{:;:;:;:;}

The effect shown by the above elements is more than Px in width. This may not be what we want. Generally, we may calculate the width to achieve the desired effect. However, if there are too many computing tasks, the events are annoying.

In this case, we can set box-sizing: border-box.

{:;:;:;:;:;:;:;}

In this case, the width displayed by the div is PX, and the outer and inner margins are drawn within the width. In fact, the content width is reduced, and the content width is the set value minus the margin.

Box-sizing: content-box; is the default effect when the box-sizing attribute is not set.

{:;:;:;}

This ensures that all elements are typeset in a more intuitive way.