Go CSS3 Global Implementation The padding and borders of all elements do not increase

Global Settings Border-box Well, first of all it's intuitive, and then it saves time and time, plus minus minus.

It also has a key role-to allow the bounding box to use the percent width normally. However, using border-box may conflict with some libraries that rely on the default box-sizing

However, this problem can be solved most of the time by setting the box-sizing of the blocks to be processed by these libraries back to Content-box.

The recommended wording is

1 HTML {2  box-sizing:border-box; 3 }4*, *:before, *:after {5  Box-sizing:inherit; 6 }

The selector * cannot overwrite the pseudo-element, so it needs to be given: before and: After setting separately. By inheriting the application to all elements, it is convenient to set the box-sizing back content-box of an element and its descendants. Foreign language Information Link: Css-tricks

Reprint Address:box-sizing:border-box the padding and border of all elements will no longer increase its width, so write it well?

Go CSS3 Global Implementation The padding and borders of all elements do not increase