Comprehensive analysis of Box-sizing

---Restore content starts---

Box-sizing

Properties allow you to define specific elements that match a region in a specific way.

For example, if you need to place two boxes with borders 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 place the border and padding into the box.

Grammar
Box-sizing:content-box|border-box|inherit;

CONTENT-BOX:W3C Standard (default)

Border-box:ie Traditional Standard

Content-box:

. test1{Box-sizing:content-box; width:200px; padding:10px; border:15px solid #eee;}

Width 200px in test1 refers to the width of the content, and so is the same height.

Border-box:

. test2{Box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee;}

Width 200px in test2 refers to the width of the border, and so is the same height.

With the example above you can understand Padding-box

Above this comprehensive understanding of box-sizing is a small part of the whole content to share to everyone, hope to give you a reference, but also hope that we support topic.alibabacloud.com.