Box-sizing, css3box-sizing in css3

Box-sizing, css3box-sizing in css3

1. Read throughW3cschoolOn: CSS3 box-sizing attribute _ w3cschool.

2. I don't have a deep understanding of the introduction. I am a person who can just forget it after reading it. Out of self-confidence, I still honestly take the example offline for a look:

<! DOCTYPE html> View Code
Use firebug of Firefox to check the layout and change the box-sizing attribute to content-box (or remove box-sizing, default box-sizing: content-box), as shown in.
After comparison, we found that:
When the box-sizing of the parent element of the class named. container is not set, that is, when the default value is content-box or box-sizing: border-box, there are two situations:
(Parent element of the outermost layer)
 
1) when the box-sizing: border-box of the two sub-elements, the width is 208px, and the border-left-width and border-right-width (both 16px) are calculated) it is PX, that is, half of the width of the parent element, as shown in (the first is the layout chart, and the second is the actual page effect) (that is, half of the parent element width + border-left-width + border-right-width)

 
2) When the box-sizing: content-box of the two sub-elements, the width is 240px, And the padding and margin are excluded, as shown in (the first is the layout chart, the second is the actual page effect ):

 
3. when you set box-sizing: border-box for an element, actually, it makes the actual width = width + padding-left + padding-right + border-left-width + border-right-width, but does not include margin-left and margin-right.
Now, I understand it.