CSS学习5（视觉表现模型）

基本框

CSS假定每个元素都会生成一个或多个矩形框，这称为元素框。各元
素框中心有一个内容区(content area)。这个内容区周围有可选的内边距、边框和外边距。这些项之所以被认为是可选的，是因为它们的宽
度可以设置为0，实际上这就从元素框去除了这些项。
可以用多种属性设置各外边距、边框和内边距，如margin-left或border-bottom。内容的背景(例如某种颜色或平铺图像)也会应用到内边
距。外边距通常是透明的，从中可以看到父元素的背景。内边距不能是负值，但是外边距可以。

包含块

每个元素都相对于其包含块摆放，包含块就是一个元素的布局上下文。
对于正常的西方语言文本流中的一个元素，包含块由最近的块级祖先框、表单元格或行内块祖先框的内容边界(content edge)构成。

正常流

这是指西方语言文本从左向右、从上向下显示，这也是我们熟悉的传统HTML文档的文本布局，注意，在非西方语言中，流方向可能不同。大多数元素都在正常流中，要让一个元素不在正常流中，唯一的办法就是使之成为浮动或定位元素。这里我们谈论的都是在正常流中的元素。
块级元素
这是指段落、标题或div之类的元素。这些元素在正常流中时，会在其框之前和之后生成“换行”，所以处于正常流中的块级元素会垂直摆放。通过声明display:block，可以让元素生成块级框。
行内元素
这是指strong或span之类的元素，这些元素不会在之前或之后生成“行分隔符”，它们是块级元素的后代。通过声明display:inline。可以让元素生成一个行内框。

块级元素

水平格式化

控制盒模型水平方向的有7个值：margin-left、border-left, padding-left、width、 padding-right、border-right和margin-right。
这7个属性的值加在一起必须是元素包含块的宽度，这往往是块元素的父元素的width值。
关于auto
在这7个属性中有3个可以设置为auto：margin-left、width、margin-right。其余的要不必须是确定的值，要不就是默认值0。
有这么几种情况：

• 3个都不是auto：按CSS的术语来讲，这些格式化属性过分受限，此时总会把margin-right强制为auto来适应父元素的宽度。
• 2个不是auto：这个最简单，剩下的一个是auto的将自动调整到适应父级元素的宽度。
• 两个外边距是auto：他们会自动设置为相等的长度，导致此元素在其父级元素中居中。
• 一个外边距和width是auto：auto的外边距会减为0，width自动填充。
• 3个都是auto：两个外边距减为0，width自动充满。

注意：由于水平外边距不会合并，父元素的内边距、边距和外边距可能影响其子元素。
负外边距
这个是允许的，也只有它是允许为负值的，这个还有好多用处呢。
百分数
百分数也是可以的，当然还是要遵守加起来为父元素宽度的限制，这里为内外边距，宽度设置的百分比都是相对父元素来说的。边框不能是百分数。
替换元素
刚才说的是非替换块级元素的水平格式化，替换块级元素其他的规则都一样，只有一个例外，当width为auto 时，元素宽度为内容的固有宽度。

垂直格式化

一个元素的默认高度由其内容确定，可以对任何块级元素设置显式高度。如果内容撑不下，根据元素的overflow属性用户代理会做出选择。
垂直属性
也是有7个：margin-top、border-top、padding-top、height、 padding-bottom、border-bottom和margin-bottom。
同样，这7个值的和必须等于其包含块的height。
同样有3个值可以是auto，其他的不行。不过上下外边距设置为auto也没有什么用，因为会被重置为0。
百分数高度
父元素的高度如果没有显式声明，那子元素的高度设置为百分数也会被重置为auto。
利用上下外边距auto垂直居中显然是不可能的。
auto高度的问题
如果块级正常流元素的高度设置为auto，而且只有块级子元素，其默认高度将是从最高块级子元素的外边框边界到最低块级子元素外边框边界
之间的距离。因此，子元素的外边距会“超出”包含这些子元素的元素（由于垂直合并外边距）。

不过，如果块级元素有上内边距或下内边距，或者有上边框或下边框，其高度则是从其最高子元素的上外边距边界到其最低子元素的下外边距边界之间的距离。
合并垂直外边距
垂直格式化的另一个重要方面是垂直相邻外边距的合并。这种合并行为只应用于外边距。如果元素有内边距和边框，它们的垂直外边距绝对不会合并。
负外边距
这个在垂直方向上也是允许的，重叠的时候，如果垂直外边距都设置为负值，浏览器会取两个外边距绝对值的最大值。如果一个正外边距与一个负外边距合并，会从正外边距减去这个负外边距的绝对值。

行内元素

除了块级元素，最常见的就是行内元素了。通过为行内元素设置框属性，可以进入到一个更有意思的领域。非替换元素和替换元素在内联内容方面的处理稍有不同，讨论行内元素的构造时我们将分别进行讨论。

一些概念

匿名文本
匿名文本（anonymous text）是指所有未包含在行内元素中的字符串。因此，在标记(p) I’m (em)so(/em) happy!(/p)中，序列“I’m”和 “happy!”都是匿名文本。注意，空格也是匿名文本的一部分，因为空格与其他字符一样都是正常的字符。
em框
em框在字体中定义，也称为字符框（