CSS盒模型是什么？它涉及到如何在这后面一个元素的尺寸确定方式，将您网页上的元素是如何定位的理解是至关重要的。盒模型适用于块级元素。内嵌的布局模式，一个同伴的概念，定义内联元素如何定位，并在覆盖内嵌格式。
盒维数计算
CSS块级元素只能是长方形。我们计算一个块级元素的外形尺寸，考虑到内容区，以及任何边距，填充，被应用到元素的边界的高度和宽度。
我们可以定义元素内容的宽度，宣布其宽度和高度属性。如果没有声明，宽度和高度属性的默认值 是 自动。
对于静态（非定位）的元素， 相对定位元素的宽度属性的值自动计算宽度将包含块减去任何水平边距，边框，填充，和滚动条的宽度。也就是说，凡是水平边距，边框，填充，和滚动条（如有）已扣除包含块的宽度时保留下来的。
包含块是参考矩形，其位置和使用的尺寸为后代元素的位置和尺寸的相对计算。虽然定位尊重其包含块元素，他们并不局限于它，他们可能会溢出。在大多数情况下，生成的框作为后裔箱块。包含块的全部细节，包括在 包含块。
为浮动或者绝对定位的元素（包括哪些元素以固定位置设置） 宽度，自动将生成的框缩小其内容的大小。
在CSS中浮动元素宽值不会收缩包装的内容，相反他们会扩大到他们的父元素的宽度。这种行为是在CSS的改变，使收缩包装发生。然而，在Internet Explorer 6和早期版本中，一个没有宣布的浮动元素的宽度值将收缩包装规格为它的内容，除非子元素有一个布局，在这种情况下，浮动父元素将扩大，以填补现有的内容的宽度父元素。
它应该也必须指出，当1浮（没有一个申明的宽度）包含1右，浮动子元素，它会也扩大填补可用内容的宽度在IE浏览器上以包括版本IE7（火狐上和包括版本2.0也表现出这个错误，但是，这个问题似乎已被固定的Firefox 3.0解决）。
因此，它总是比较安全的指定宽度为一个浮动元素在可能的情况下明确的价值，从而避免以上所述的错误行为。但是，只要你知道上面提到的问题，你可能会发现，widthless浮动，可以在某些情况下，如流体宽度的水平菜单。
不管如何定位内容区域，如果没有值被宣布为高度，最小高度和 很大高度，其 高度值将等于内容的高度。
因此，以确定需要在页面上放置一个元素的总空间，内容区域的尺寸添加任何填充，边框，和已宣布的利润率。当然，一个元素可能没有填充，边框或利润率，在这种情况下，其尺寸将完全取决于其内容。
如果一个元素包含浮动或绝对定位的元素，它会没有内容可言，其高度将是零。我们将讨论在这个浮动与清除http://reference.sitepoint.com/css/floatclear。
贯彻盒模型
盒模型是很好的证明了一个简短的例子。计算，我们将使用它来确定所需的总空间，以容纳一个页面上的元素（忽略的时间是看到此以下的保证金崩溃）将是如下：
Total width = left margin + left border + left padding + width +
right padding + right border + right margin
总宽度=左边界+左边框+左填充+宽+ 右填充+右边框+右边缘
Total height = top margin + top border + top padding + height +
bottom padding + bottom border + bottom margin
总高度=顶边距+上边框+顶部填充+高度+ 底部填充+下边框+下边距
下面是我们的例子中CSS的规则集，它包含的所有元素具有框属性的声明类的 “盒子”：
.box { width: 300px; height: 200px; padding: 10px; border: 1px solid #000; margin: 15px; }
上述元素的总规模将计算公式如下：
Total width = 15 + 1 + 10 + 300 + 10 + 1 + 15 = 352px Total height = 15 + 1 + 10 + 200 + 10 + 1 + 15 = 252px
上述计算描绘在图1，这是从元素的布局显示Firebug中， JavaScript和CSS开发的Firefox插件。
在图中，我们可以清楚地看到内容在中心区域，填充内容区周围，边境地区和边缘区。内容区域的外缘称为内容的边缘或内边缘 ,填充区域的外缘称为 填充边缘 ;边境地区的外缘称为边界的边缘 ;和边缘区的外缘是称为你猜它的边缘的边缘或外部边缘。
从这个简短的例子可以看到，这个元素，以适应在页面上，我们需要一个空间，这至少352px宽，252px高。如果可用空间是任何比这个更小的，该元素将被错位，或将其包含块溢出。注意的Internet Explorer 6和更早的版本将最有可能伸展包含块，以适应这一额外的高度，并可能严重扰乱布局。其他浏览器将让元素溢出，它的边界，但会忽略的内容。
小心折叠边距
虽然利润率在上面放置元素所需的总空间计算在内，注意: 静态（非定位）元素的垂直相邻的利润率将折叠成更大的利润率是相邻的上方和下方的元素。这意味着，实际所需的空间来放置元素不一定会从现有页面上的元素的边缘边缘延伸：只有很大的利润率将申请，较小的利润率将出现重叠更大的利润。看到折叠利润率为这个相当复杂的问题的全部细节。
