How many type of “Box Model” CSS have?

问题:

How many type of "Box Model" CSS have?

回答1:

CSS3 has two box-models. content-box and border-box. content-box is the default.

content-box

---

content-box is the default CSS box-model since CSS version 1. When using content-box, only the content of the box is taken in effect when calculating the width of the box. In the reference below, content-box is referred to as the W3C box model.

border-box

---

border-box is the ported version of the Microsoft box model. In Internet Explorer 5 and below (IE6 in Quirks mode), IE considered the width of the element as being the combined width of the border, padding and content area of the box. In the reference below, border-box is referred to as the W3C box model.

No element uses the border-box box model unless specified via the box-sizing property, as such:

box-sizing: border-box;

Reference Image

---

回答2:

As far as I know there is only one type of CSS box model. Early versions of Internet Explorer did have a bug where the padding and border were included in the total width, but it was still the same box model.