网页设计学习教程:CSS盒模型

网页设计中的每个元素都是长方形的盒子。盒子的尺寸是怎样精确计算的，请看下图：

如果是 Firebug 用户的话(基本和前端有关的都会用到 Firebug 吧 - 糖伴西红柿)，就会很熟悉下面的图表了。
这个图表很好地展示了作用于页面上任意盒子的数值。

注意以上两个例子中，margin 都是白色的。Margin 比较特别，它不会影响盒子本身的大小，但是它会影响和盒子有关的其他内容，因此 margin 是盒模型的一个重要的组成部分。

盒子本身的大小是这样计算的：

值未声明的情况

如果未声明 padding 或者 border，那他们或者值为零(使用 css reset 时)，或者为浏览器的默认值(很可能不是零，尤其是那些通常没有重置的表单元素)

块级盒的默认宽度

如果未声明宽度，并且盒子是静态或者相对定位的，宽度会保持 100％的 宽度，padding 和 border 会向内推动，而不是向外扩展。