块级元素的表现有时可以预测，有时则很让人惊讶。例如，元素沿横轴和竖轴摆放时，其处理就可能不同，为了充分了解如何处理块级元素，必须对一些边界和区域很清楚。

一般地，网页设计中一个元素的width被定义为从左内边界到右内边界的距离，height则是从上内边界到下内边界的距离。这些属性都可以应用到元素。

不同的宽度、高度、内边距和外边距相结合，就可以确定文档的布局。在大多数情况下，文档的高度和宽度由浏览器自动确定，这要基于可用的显示区域和其他一些因素。当然在CSS网站制作中，可以更直接地控制元素的大小以及显示方式。对于水平和垂直布局，可以选择不同的效果，所以我们将分别介绍。

水平格式化

水平格式化往往比你想象得更复杂。其部分复杂性在于width影响的是内容区的宽度，而不是整个可见的元素框。考虑以下例子：

<p style="widch: 200px;">wideness?</p>

这行代码使段落的内容区宽度为200像素。如果为元素指定一个背景，就能很清楚地看出。不过，如果网页设计中还指定了内边距、边框或外边距，这些都会增加到宽度值。假设指定如下：

<p style="width: 200px; padding: 10px; margin: 20px;">wideness?</p>

可见元素框的宽度现在是220像素，因为在内容的左边和右边分别增加了10像素的内边距。外边距则会在左右两边再延伸20像素，使整个元素框的宽度为260像素。

一定要知道这样会隐式地增加width值，理解这一点很重要。大多数用户认为，width 是指可见元素框的宽度，如果为一个元素声明了内边距、边框以及宽度，他们指定的宽度值则是左外边界到右外边界的距离。但在CSS中并不是这样。一定要牢牢记住这一点，以免以后糊涂。

注意：在写作本书时，CSS的Box Model模块提供了一些建议，提出了一些方法来允许创作人员决定width是指内容宽度还是可见框宽度。

对此有一个很简单的规则，正常流中块级元素框的水平部分总和就等于父元素的width。假设一个div中有两个段落，这两个段落的外边距设置为1em。段落的内容宽度（width 的值）再加上其左、右内边距，边框或外边距，加在一起正好是div内容区的width,

假设div的width为30em，那么各段落内容宽度、内边距，边框或外边距的总和就是30em。在图7-3中，段落外的“空白”实际上是其外边距。如果div有内边距，还会有更大的空白，不过这里div没有内边距。稍后就会讨论内边距。

水平属性

网页设计中水平格式化的“7大属性”是：margin-left、border-left, padding-left、width、 padding-right、border-right和margin-right。这些属性与块级框的水平布局有关，如图7-4所示。

这7个属性的值加在一起必须是元素包含块的宽度，这往往是块元素的父元素的width 值（因为块级元素的父元素几乎都是块级元素。

图7-3：元素框与其父元素的width相同

图7-4：水平格式化的“7大属性”

在这7个属性中，只有3个属性可以设置为auto:元素内容的width，以及左、右外边距。其余属性必须设置为特定的值，或者默认宽度为0，图7-5显示了框中的哪些部分可以取值为auto，而哪些部分不能。

图7-5：可以设置为auto的水平属性

width必须设置为auto或某种类型的非负值。如果在水平格式化中确实使用了auto，会得到不同的效果。

注意：CSS网站制作中允许浏览器为width设置一个最小值，块级元素的width不能小于这个值，对于不同浏览器，这个最小值可能不同，因为在规范中对此没有定义。