7基本视觉格式化

CSS假定每个元素都会生成一个或多个矩形框，这称为元素框。各元素框中心有一个内容区（content area），这个内容区周围有可选的内边距、边框和外边距。内容的背景（例如某种颜色或平铺图像）也会应用到内边距。外边距通常是透明的，从中可以看到父元素的背景。边框的颜色默认为元素内容的前景色。

包含块是一个元素的“布局上下文”。包含块由最近的块级祖先框、表单元格或行内块祖先框的内容边界（content dege）构成。

要让一个元素不在正常流中，唯一的办法就是使之成为浮动或定位元素。块级元素是指段落、标题或div之类的元素，这些元素在正常流中，会在其框之前和之后生成“换行”。行内元素是指strong或span之类的元素，这些元素不会在之前或之后生成“行分隔符”，它们是块级元素的后代。根元素是位于文档树顶端的元素，在HTML文档中，这就是html元素。

块级元素的width和height是针对内容区而言的。正常流中块级元素框的水平部分总和就等于父元素的width。

水平格式化的“7大属性”：margin-left、border-left、padding-left、width、padding-right、border-right和margin-right。width、margin-left和margin-right可以设置为auto。其他元素必须设置为特定的值，或者默认款度为零。这7个属性的值加在一起必须是元素包含块的宽度，这往往是块元素的父元素的width值（因为块级元素的父元素几乎都是块级元素）。当width、margin-left和margin-right都设置为auto时，margin-right会强制变成auto（对于从左向右读的语言）。将两个外边距设置为相等的长度是将元素居中的一种正确方法，这不同于使用text-align（text-align只应用与块级元素的内联内容，所以将元素的text-align设置为center并不能将这个元素居中）。某个外边距和width设置为auto时，设置为auto的外边距会减为0。这3个属性都设置为auto时，两个外边距都会设置为0，而width会尽可能宽。外边距可以为负，此时子元素会超出父元素，但并没有违反规范。左外边距为负，可能导致子元素超出父元素的边框和浏览器敞口本身的边界。

非替换块元素的所有规则同样适用于替换块元素，只有一个例外：如果width为auto，元素的宽度则是内容的固有宽度。如果一个替换元素的width不同于其固有宽度，那么height值也会成比例变化（除非height自已也显式设置为一个特定值）。

垂直格式化也有7个相关的属性：margin-top、border-top、padding-top、height、padding-bottom、border-bottom和margin-bottom。height、margin-top和margin-bottom可以设置为auto。如果正常流中一个块元素的margin-top或margin-bottom设置为auto，它会自动计算为0。如果块级正常流元素的高度设置为auto，而且只有块级子元素，其默认高度将是从最高级子元素的外边框边界到最低块级子元素外边框边界之间的距离。不过，如果块元素有上内边距或小内边距，或者有上边框或下边框，其高度则是从其最高子元素的上外边距边界到其最低子元素的下外边距边界之间的距离。在包含块上设置边框或内边距时，会使其子元素的外边距包含在内包含块中。如果垂直外边距都设置为负值，浏览器会取两个外边距绝对值的最大值。如果一个正外边距与一个负外边距合并，会从正外边距减去这个负外边距的绝对值。负的上外边距会使段落看上去被向上拉，负的外边距会使段落看上去被向下拉。

行内元素的框属性

匿名文本（anonymous text）是指所有未包含在行内元素中的字符串，空格也是匿名文本的一部分。em框在字体中定义，也称为字符框（character box），font-size的值确定了各个em框的高度。非替换元素的内容框是元素中各字符的em框串在一起构成的框。在替换元素中，内容区就是元素的固有高度再加上可能有的外边距、边框或内边距。行间距（leading）是font-size值和lien-height值之差，这个差实际上要分为两半，分别应用到内容区的顶部和底部。行间距只应用于非替换元素。行内框通过向内容区增加行间距来描述，对于非替换元素，元素行行内框的高度等于line-height的值；对于替换元素，行内框的高度等于内容区的高度，因为行间距不应用到替换元素。行框是包含该行中出现的行内框的最高点和最低点的最小框。

用本章的术语，vertical-align的关键字的效果描述入小：top（将元素行内框的顶端与包含该元素的行框的顶端对齐），bottom（将元素行内框的底端与包含该元素的行框的底端对齐），text-top（将元素行内框的顶端与父元素内容框的顶端对齐），text-bottom（将元素行内框的底端与父元素内容框的底端对齐），middle（将元素行内框的垂直中点与父元素基线上0.5ex处的一点对齐），super（将元素的内容区和行内框上移），sub（将元素的内容区和行内框下移），<percentage>（将元素上移或下移一定距离，这个距离由相对于元素line-height值指定的一个百分数确定）。

改变行内元素的line-height时，为了避免内容重叠，有几种办法：1.对font-size有改变的元素结合使用em单位。2.给font-height设置一个原始数字值，作为这个数会成为缩放因子，而该因子是一个继承值而非计算值。3.适当地设置样式，使行高巧好能包含行内容，而没有多余的空间。行内框与内容区相同，意味着会使用所需的绝对最小大小来包含各元素的内容区。

 内边距、外边距和边框都可以应用与行内非替换元素。行内元素的这些方面根本不会影响行框的高度。行内元素的边框边界由font-size而不是line-height控制。内边距不会改变内容区的具体形状，不过它会影响元素行内框的高度。负外边距是使行内替换元素挤入其他行的唯一办法。

display属性可以设置用户代理对元素的显示方式。改变的只是元素的显示角色，而不是其本质。行内块元素（inline-block）作为一个行内框与其他元素和内容相关，它就像图像一样放在一个文本行中。rin-in可以使某些块级元素称为下一个元素的行内部分。只需改变元素的display值，并使下一个元素框作为块级元素框，就可以使元素称为run-in元素。