CSS3 about box-sizing in the text code

1. Read through the following W3cschoolOn the introduction: CSS3 box-sizing Property _w3cschool.

2. Look at the introduction of understanding is not deep enough, I belong to just read the blink of an eye can forget people. For your own worry, or honestly take the example to the offline look:

<! DOCTYPE html>
Use Firefox's firebug to see the layout, change the Box-sizing property 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 a parent element with a class name of. Container is not set, that is, when the default value Content-box or Box-sizing:border-box, the following two cases are divided:

(the outermost parent element)


1) When the box-sizing:border-box of two sub-elements, width is 208px, the set of Border-left-width and Border-right-width (all 16px) is 240px, That is half the width of the parent element, as shown (the layout on the left and the actual page effect on the right): (that is, half of the parent element Width+border-left-width+border-right-width)



2) When the box-sizing:content-box of two sub-elements, width is 240px,padding and margin are excluded, as shown (on the left is the layout map, the right side of the actual effect of the page):



3. When setting Box-sizing:border-box for an element, the actual is to make it width = padding-left + padding-right + border-left-width + border-right-width, But it does not contain margin-left and margin-right.

Well, it's finally clear.