Parsing the box-sizing attribute in CSS3

When you refactor the mobile end page, we often encounter two frames side-by-side situation, and need to be wide adaptive, equal width, have a border such a situation, my usual method is to use the positioning to deal with, and then use a negative positioning to solve, but later found that you can use the Box-sizing attribute in CSS3 to be done. All right, let's recommend it to everyone.

Grammar:

Box-sizing:content-boxborder-boxinherit;

Defined:

The Box-sizing property allows you to define specific elements that match a range in a particular way. For example, if you need to place two border-bordered boxes side-by, you can set box-sizing to "Border-box". This allows the browser to render a box with the specified width and height, and to place the border and inner margins in the box.

That is to say, if we used border and padding, the width of our elements should be reduced correspondingly, and the widths of border and padding could be kept in the same width. But after using the box-sizing, you don't have to lose it.

The code is as follows:

16. This div occupies the left half.
18. this div occupies the right half.

This is only practical for mobile end and PC high handsome browser, PC end cock Silk browser does not support, see the situation using it!