CSS框模型指定如何呈现HTML元素的边距，边框和填充。

可视化的CSS Box模型

CSS框模型如下所示：

呈现的每个HTML元素均被视为一个框。盒子有四个部分(或者层)。

• 边距：最外面的部分是此HTML元素与其他HTML元素之间的边距。
• 边框：第二部分是边框。边框位于边距内部，并围绕HTML元素的填充和内容。
• 填充：第三部分是填充。填充位于边框内，并围绕HTML元素的内容。
• 内容：第四部分是内容。 HTML元素的内容是HTML元素内部显示的内容。这通常是文本，图像和其他HTML元素的组合。

边距，边框和填充可以通过CSS属性进行控制。这些属性中的每一个都在以下文本中进行了解释：

• CSS边距
• CSS填充
• CSS边框

内容框可以设置其宽度和高度。我们还可以指定如果内容框中的内容太大而无法容纳在内容框中时会发生什么。

宽度和高度

我们可以使用CSS的width和height属性来控制HTML元素框的宽度和高度。可以使用任何标准CSS单位指定宽度和高度。这是一个例子：

#theDiv {
    width  : 300px;
    height : 200px;
}

该CSS规则将id为theDiv的HTML元素的宽度设置为300像素，高度设置为200像素。

CSS的width和height属性设置HTML元素的内容框的宽度和高度。这意味着HTML元素占用的整个宽度和高度可能会更大。对于width和height，我们必须添加padding，border和margin的大小。

total width  = width  + margin-left + margin-right 
                      + border-left-width + border-right-width 
                      + padding-left + padding-right

total height = height + margin-top + margin-bottom 
                      + border-top-width + border-bottom-width 
                      + padding-top + padding-bottom

如果一个HTML元素的填充为5像素，边框为1像素，边距为10像素(所有面都为像素)，则HTML元素的总宽度和高度将为：

total width  = width  + 10 + 10 + 1 + 1 + 5 + 5 = width  + 32
total height = height + 10 + 10 + 1 + 1 + 5 + 5 = height + 32

盒子大小

我们可以使用box-sizingCSS属性更改浏览器计算HTML元素大小的方式。 " box-sizing" CSS属性是CSS 3.0中的新增功能。

在Firefox中，我们将必须使用-moz-前缀，因此该属性称为-moz-box-sizing。只需将" box-sizing"和" -moz-box-sizing"两个属性设置为相同的值，即可在IE，Chrome和Firefox中使用。

" box-sizing"属性可以采用以下值：

• content-box
• border-box
• inherit(继承)

" content-box"值是默认值。这样CSS的width和height属性就可以单独设置内容框的宽度和高度。

" inherit"值表示HTML元素从其父HTML元素继承此CSS属性的值。

" border-box"值使浏览器将" width"和" height" CSS属性解释为边框的宽度和高度。边框是HTML元素边框内的所有内容，包括边框本身。

当使用box-sizing：border-box时，内容框的宽度和高度将被计算为：

content-box-width  = border-box-width  - border-width  - padding width
content-box-height = border-box-height - border-height - padding height

如果一个HTML元素的宽度为200，高度为180，填充为5像素，边框为1像素(所有边都在边上)，则内容框的宽度和高度将为：

content-box-width  = 200  - (2 * 1) - (2 * 5) = 200 - 2 - 10  = 188
content-box-height = 180  - (2 * 1) - (2 * 5) = 180 - 2 - 10  = 168

HTML将占用200 x 180像素(如果元素有的话，还要加上边距)，该像素由CSS的width和height属性设置。内容框将仅占用188 x 168像素，因为从边框的宽度和高度中减去了边框和内边距，以获得内容框的宽度和高度。