---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.