基本视觉格式化

基本框

CSS嘉定每个元素都会生成一个或多个矩形框，这个称为元素框，各元素框忠心有一个内容区。这个内容区周围有可选的内边距、边距和外边距。这些项之所以被认为是可选的，原因是他们的宽度可以设置为0。
可以用多种属性设置各外边距、边距和内边距，如margin-left或border-bottom。内容的背景也会应用到内边距。外边距通常是透明的，从中可以看到父元素的背景。内边距不能是负值，但是外边距可以。

边框使用已定义样式生成，如solid或者inset。边框的颜色使用border-color属性设置。如果没有设置颜色，那么边框将取元素内容的前景色。例如，如果一个段落的文本是白色的，那么该段落的边框都是白色，除非创作人员显示地申明另一种边框色。如果边框样式有某种缝隙，则可以通过这些缝隙看到元素的背景。换句话说，边框和内容和内边距具有相同的背景。

包含块

每个元素都相对于包含块摆放，可以这么说，包含块就是一个元素的‘布局上下文’。css2.1定义了一系列规则来确定元素的包含块。这里介绍的知识其中的部分规则。
对于正常的西方语言文本流中的一个元素，包含块由最近的块级祖先框、表单元或者行内块的内容边界构成。

一些专业术语

正常流

这是西方语言文本从左到右、从上到下显示，这也是我们熟悉的传统HTML文档的文本布局。注意，非西方语言中，流的方向可能不同。大多数元素都在正常流中，药让一个元素不在正常流中，唯一的办法就是使之成为浮动或者定位元素。

非替换元素

如果元素的内容包含在文档中，则称之为非替换元素。例如，如果一个段落的文本内容都放在该元素本身之内，这个段落就是一个非替换元素。

替换元素

这是指作为其他内容占位符的元素。替换元素的一个经典例子就是img元素，他只是指向一个图像文件，这个文件将文档流中该img元素本身所在位置。大多数表单元素也可以替换。

块元素

这是指段落、标题或者div之类的元素。这些元素在正常流中，会在其框之前和之后生成换行，所以处于正常流中的块极元素会垂直摆放。通过什么display：block，可以让元素生成块级框。

行内元素

这是指strong和span之类的元素，这些元素不会在之前或者之后生成‘行分隔符’，他们是块极元素的后代。通过申明display：inline，可以让元素生成一个行内元素。

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

块级元素

水平格式化

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

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

这行代码使段落的内容区宽度为200像素。如果为元素指定一个背景，就能很清楚地看出。不过，如果还指定了内边距、边框或者外边距，这些都会增加到宽度值。假设指定如下：
<p style="width:200px;padding:10px;margin:20px">wideness?</p>
可见元素框的宽度现在是220像素，因为在内容的左边和右边分别增加了10像素的内边距。外边距则会在左右两边延伸20像素。使得整个元素框的宽度为260像素。

水平属性

水平格式化的‘7大属性’:margin-left、border-left、padding-left、width、padding-right、border-right和margin-right。在这7个属性中，只有3个属性可以设置为auto：元素内容的width，以及左右外边距。其余属性必须为特定的值，或者默认宽度为0.width必须设置为auto或某种类型的非负值。如果在水平格式化中确是使用了auto，会得到不同的效果。

使用auto

如果设置width、margin-left或margin-right中的某个值为auto。而余下两个属性指定为特定的值，那么设置为auto的属性会确定所需的长度，从而使元素框的宽度等于父元素的width。换句话说，假设7个元素的和必须为400像素，没有设置内边距或边框，而且右外边距和width设置为100px，左外边距设置为auto，那么左外边距的宽度将会是200像素。

从某种程度上讲，可以用auto弥补实际值与所需总和的差距。不过，如果这3个属性都设置为100px，即没有任何一个属性为auto会怎么样呢？

如果所有这3个属性都设置为非auto的某个值或者，按css的术语来讲，这些格式化属性过分受限或者，此时总会把margin-right强制设置为auto。这意味着。如果外边距和width都设置为100px，用户代理将右外边距重置为auto。右外边距的实际宽度则会根据有一个auto值时的规则来设置，即由这个auto值来填补所需的距离，使元素的总宽度等于包含块的width。

如果两个外边距都显示地设置，而width设置为auto，width值将设置所需的某个值，从而达到需要的总宽度。

不只一个auto

下面来看如果这3个属性（width、margin-left和margin-right）中有两个都设置为auto会出现什么情况。如果两个外边距都设置为auto，如一下代码所示，他们会设置为相等的长度，因此将元素在其父元素居中。将两个外边距设置为相等的长度是将元素居中的一种正确的方法，这不同于使用text-align（text-align只应用于块极元素的内联内容，所以将元素的text-align设置为center并不能将这个元素居中）

负外边距

到目前为止，看上去一切很直接明了，你可能会奇怪为什么会说情况很可能会很复杂。外边距还有一个方面很特殊：外边距可以为负。这种设置是正确的，完全可以将外边距设置设置为负值。这么做会带来一些很有意思的效果。
要记住，7个水平属性的总和要等于父元素的width。只要所有属性都是大于或者等于0的，元素就不会大于其父元素的内容区。

百分数

如果width、内边距和外边距设置为百分数，会应用同样的规则。值申明为长度还是百分数不重要。

替换元素

到目前为止，我们已经介绍了正常文本流中非替换块极元素的水平格式化。替换块极元素管理起来更简单一些。非替换块元素的所有规则同样适用于替换块元素，只有一个例外：如果width为auto，元素的宽度则是内容的固有宽度。

垂直格式化

类似于水平格式化，块极元素的垂直格式化也有自己一系列有意思的行为，一个元素的默认高度由其内容决定。高度还会受其内容宽度的影响；段落越窄，相应地就会越高，以便容纳其中所有的内联内容。
在CSS中，可以对任何块级元素设置显示高度。如果这样做，其结果取决于另一血因素。假设指定高度大于显示内容所需高度：

<p style="height:10em;"></p>

在这种情况下，多余的高度会产生一个视觉效果，就好像有额外的内边距一样。不过假设高度小于显示内容所需的高度。如果是这样，浏览器会提供某种方法来查看所有内容，而不是增加元素框的高度。浏览器可能会向元素增加一个滚动条。

垂直属性

与水平格式化一样的情况，垂直格式化也有7个相关的属性：margin-top、border-top、height、padding-bottom、border-和margin-bottom。
这七个属性必须等于元素包含块额度height。这里往往是块级父元素的height的值。
这7个元素中只有3个属性可以设置为auto：元素内容的height以及上下外边距。上下内边距和边框必须设置为指定的值。默认为0.有意思的是，如果一个正常流中的块极元素的margin-top或者margin-bottom设置为auto，它会自动计算为0.遗憾的是，如果值为0，就不可能很容易将正常流元素在其包含块中垂直居中。这也说明，如果将一个元素的上下外边距设置为auto，实际上他们都会设置为0，使得元素框没有外边距。

百分数高度

前面已经了解了如果处理设置长度值的高度，下面再花点时间介绍百分数高度。如果一个块极正常流元素的height设置为一个百分数：这个值则包含height的一个百分数。
如果没有显示申明包含块的height，百分数高度会自动重置为auto。

auto高度

在最简单的情况下，如果块级正常流元素设置为height：auto，显示时其高度将恰好足以包含其内联内容的行盒。高度为auto时，会在段落上设置一个边框，并认为没有内边距，这样下边框刚好在文本最后一行的下面，上边框则刚好在文本第一行的上面。
如果块级正常流元素的高度设置为auto，而且只有块级子元素，其默认高度将是从最高块级子元素的外边框边界到最低块级子元素外边框边界的距离。因此，子元素的外边距会超出包含这些子元素的元素。不过，如果块极元素有伤内边距或下内边距，或者有上边框或下边框，其高度则是其最高子元素的上外边距边界到其最低子元素的下外边距边界之间的距离。