Off Topic:
The standard of the world-content-box is that it needs to calculate the border, padding and content; but personally,
More like the traditional IE6 when the strange mode, do not consider whether the container will be open (upset layout);
Box model Difference Box size calculation principle
Standard box = (border + padding + content block size), reaching;
Traditional IE6 box = overall width height (border, fill and change with box size)
If the calculation takes place, both boxes are counted as margin (margin)
In short, the standard box is the need to add various sizes to get the overall width of the high, and the traditional IE6 from the overall minus the intrinsic element size to achieve the adjustment effect
Css3:box-sizing
Box-sizing:content-box | border-box | inherit;there's a padding-box for Firefox, almost no!!!
- Content-box: Standard box model
- Border-box: A box model of traditional IE6
- Padding-box: Currently only valid for Firefox, but also minus the adaptation. But starting with the padding,
Validation and Effect codes
Simple code, three boxes
<! DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Box-sizing</title> <style> . Demo1,. Demo2,. Demo3{ width:px; height:px; background-color: #2277AD; margin:px; } . Demo1{ box-sizing: content-box; Border: #12D732px solid; padding:tenpx; } . Demo2{ box-sizing: border-box; Border: #12D732px solid; padding:tenpx; } . Demo3{ box-sizing: padding-box; Border: #12D732px solid; padding:tenpx; } </style></head><body> <div class="Demo1">I am inside the box content Ah!!</div> <div class="Demo2">I am inside the box content Ah!!</div> <div class="Demo3">I am inside the box content Ah!!</div></body></html>
- Box size for Standard Model (280x280) = 200 +10*2 + 30*2-Add effect
- Traditional IE6 box size (200X200) = 120 + 10 * 2 + 30*2-minus effect
- Padding-box box size for Firefox (260x260) = 180 + 10*2 + 30*2– minus effect starts with padding
Summarize
- This property supports ie8+, and other browsers basically support it (few people should use very old ff,chrome.)
- The feeling Border-box is ideal for layout layouts, because you don't have to worry about padding these boxes that cause the box to be larger than the wrapping layer, resulting in line breaks, or other messy problems.
- The standard box also has his benefits, can be targeted to control the size of the content block. Very careful to make adjustments, it is necessary to calculate the more troublesome point
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
Css3:box-sizing: No more worrying about the box model