Css3 Box model and Box-sizing, css3box-sizing

Css3 Box model and Box-sizing, css3box-sizing

1. Box Model)

The Box Model in CSS is divided into two types: W3C standard Model and IE traditional Model. Their similarities are the calculation relationship of the width, height, padding, border, margin, and actual size of the elements. The difference between them is that the calculation methods of the two are inconsistent.

1) W3C standard Box Model:

/* Outer box size calculation (element space size) */Element space height = content height + padding + border + marginElement space width = content weight + padding + border + margin/* inner box size calculation (Element size) */Element Height = content height + padding + borderElement Weight = content weight + padding + border

2) Traditional IE Box Model (IE6 or earlier, excluding IE6)

　　　　

/* Outer box size calculation (Element space size) */Element space Height = Content Height + margin (Height includes the Element Content Height, border Height, and padding Height) element space width = Content Weight + margin (Height includes the Element Content width, Border width, and padding width)/* inner box size calculation (Element size) */Element Height = content Height (Height includes the Element content Height, border Height, and internal border Height) element Weight = content Weight (Weight includes the Element content width, Border width, and internal border width)

Currently, most browser elements are based on the W3C standard Box Model, but some elements in form are based on traditional Box models, such as submit, reset, button, and select elements in input, in this way, if we set border and padding for it, it will only extend inward.

2. Box-sizing: content-box | border-box | inherit

1) content-box: this value is its default value, which allows elements to be displayed in the W3C standard Box Model, that is, the width and height of the elements) equal to the border of the element (border) plus the padding of the element (padding) plus the content width or height of the element (content height)

2) border-box: This value allows the elements to be displayed in the traditional IE Box Model (earlier than IE6), that is, the width and height of the elements) it is equal to the content width and height of the element ). Content width and content height contain the border, padding, content width, and content height of the element.

Box-sizing supports all browsers, but only IE8 or later versions are supported in IE. Although modern browsers support this, Some browsers still need to add their own prefixes, -moz-must be added to Mozilla,-Webkit-must be added to webkit kernel,-0-must be added to Presto kernel, and-ms-must be added to IE8 kernel -, therefore, when box-sizing is compatible with browsers, you must add their respective prefixes.

/*Content box*/Element {  -moz-box-sizing：content-box;  -webkit-box-sizing：content-box;  -o-box-sizing：content-box;  -ms-box-sizing：content-box;  box-sizing：content-box;          }/*Border box*/Element { -moz-box-sizing：border-box; -webkit-box-sizing：border-box; -o-box-sizing：border-box; -ms-box-sizing：border-box; box-sizing：border-box;                  }