CSS入门之CSS盒模型（Box Model）-三七八蛋

首页>>前端设计>>CSS入门之CSS盒模型（Box Model）

CSS入门之CSS盒模型（Box Model）

前面的文章中介绍了：CSS入门之语法基础，CSS入门之伪类动态链接，而CSS盒模型（Box Model）的学习和理解一直是学习Div+CSS网页布局的基础内容。我在网上看了很多教程，整理了一篇，相信能帮助CSS初学者对CSS盒模型（Box Model）加深理解。

什么是css盒模型？

W3C组织就建议把所有网页上的对象都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层。盒模型主要定义四个区域：内容(content)、边框距(padding)、边界(border)和边距(margin)。 margin，background-color，background-image，padding，content，border之间的层次、关系和相互影响。网页设计中的每个元素都是长方形的盒子。盒子的尺寸是怎样精确计算的，请看下图：

css盒模型1

如果是 Firebug 用户的话，就会很熟悉下面的图表了。这个图表很好地展示了作用于页面上任意盒子的数值。

css盒模型2

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

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

Width	width + padding-left + padding-right + border-left + border-right
Height	height + padding-top + padding-bottom + border-top + border-bottom

值未声明的情况

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

块级盒的默认宽度

如果未声明宽度，并且盒子是静态或者相对定位的，宽度会保持 100％的宽度，padding 和 border 会向内推动，而不是向外扩展。但是，如果明确设置盒子的宽度为 100％，那么 padding 就会向外延展。要注意的是，盒子的默认宽度并不真的是 100％，而是剩下的可能值(应该是说，剩余真实存在的宽度)。应该了解这个特殊值，因为很多情况下，它对于设置/不设置宽度都是非常有用的。