A brief introduction to the usefulness of CSS box-sizing

Only a few days ago found box-sizing such a style attribute, studied a feeling is very interesting,

Different display results by specifying the box model type of the container

For example: When a container width is defined as width:100%; Then, if you add padding or border, it overflows the parent container, which expands outwards.

If this style is used, it is specified as Box-sizing:border-box; Then padding and border will not overflow, but inward contraction, this effect feels very practical,

In particular, input and textarea are now set to 100% and then directly increase the padding and borders and no more complicated calculations and adaptation