在CSS中主要有以下几种盒模型：inline、inline-block、block、table、absolute position、float。
W3C的标准盒模型
外盒尺寸：
element 空间高度 = 内容高度 + 内距padding + 边框border + 外距margin；
element 空间宽度 = 内容宽度 + 内距padding + 边框border + 外距margin；
内盒尺寸：
element 空间高度 = 内容高度 + 内距padding + 边框border；
element 空间宽度 = 内容宽度 + 内距padding + 边框border；
CSS3盒模型
box-sizing
|
1
|
box-sizing: content-box|border-box|inherit; |
| 值 | 描述 |
|---|---|
| content-box |
这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。 |
| border-box |
为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 |
| inherit | 规定应从父元素继承 box-sizing 属性的值。 |
overflow
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，不添加滚动条，会呈现在元素框之外，而且clip属性设置将失败。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容，底部出现滚动条框。不管内容是否溢出overflow-x出现横向滚动条，overflow-y出现纵向滚动条。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容，底部不会出现滚动条框。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
resize
规定是否可由用户调整元素的尺寸。
如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll。
| 值 | 描述 |
|---|---|
| none | 用户无法调整元素的尺寸。 |
| both | 用户可调整元素的高度和宽度。 |
| horizontal | 用户可调整元素的宽度。 |
| vertical | 用户可调整元素的高度。 |
outline
outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
|
1
|
outline:color style width offset inherit; |
outline 简写属性在一个声明中设置所有的轮廓属性。
outline轮廓线不会占据空间，也不一定是矩形。但是创建的各边外轮廓都是一样的，不能设置border-top之类的属性。