基本视觉格式化

基本框

内容区，内边距，边框，外边距。
边框的颜色如果没有设置，将取元素内容的前景色，同时边框与内容和内边距具有相同的背景。

包含块

每个元素都相对于其包含块摆放，可以这么说，包含块就是一个元素的“布局上下文”。

块级元素

水平格式化

正常流中块级元素框的水平部分总和就等于父元素的width(width是指内容区的宽度)。

水平属性

水平格式化的“7大属性”是：

margin-left  margin-right  padding-right  padding-leftwidth  border-right border-left

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

这7个属性中只有3个属性可以设置为auto：元素内容的width，以及左右外边距。其余属性必须设置为特定的值，或者默认宽度为0。如果设置了三者中某个值为auto，而余下两个属性为特定的值，那么设置为auto的属性会确定所需长度，从而使元素框的宽度等于父元素的width。从某种程度上来说，可以用auto来弥补实际值与所需综合的差距。

不止1个auto

0个auto

但是如果这3个属性都设置为非auto的某个特定值，按照CSS的术语来说，这些格式化属性过分受限，此时总会把margin-right强制为auto。

2个auto

如果2个外边距为auto，则会将内容区置中。
如果width和一个外边距置中，则设置为auto的外边距将减为0。

3个auto
两个外边距都会设置为0，而width尽可能的宽。

负外边距

可以显示设置负外边距，当然也可以利用元素7个水平属性的综合要等于父元素的width，来生成负外边距。

举例如下

div {width:400px;}div > p {margin-left:10px;width:auto;margin-right:-50px;}//计算过程width+10px+(-50px)=400px;width=440px;

替换元素

以上的所有规则都适合于正常文本流中非替换块级元素的水平格式化。非替换元素的所有规则同样适用于替换块元素，只有一个例外：如果width为auto元素的宽度则是内容的固有宽度。可以为width设置特定值覆盖这个规则，注意，元素的高度也会随之而成比例变化，除非height也显示设置一个特定值。反过来如果只显示设置height也一样。

垂直格式化

一个元素的默认高度由其内容决定。如果元素内容的高度大于元素框的高度，用户代理的具体行为将取决于overflow属性的值。

与水平格式化的情况一样，垂直格式化也有7个相关的属性

margin-top  margin-bottom  padding-bottom  padding-topheight  border-bottom border-top

这7个属性的值必须等于元素包含块的height。同样只有外边距与height可以设置为auto。
有意思的是，如果正常流中的一个块元素的margin-top或margin-bottom设置为auto，他会自动计算为0，因此不能通过这种方式让元素垂直居中。

百分数高度

如果一个块级正常流元素的height设置为一个百分数，这个值则是包含块height的一个百分数。不过如果没有显示声明包含块的height，百分数高度会重置为auto。

而margin-top margin-bottom padding-bottom padding-top的百分比则是相对于父元素的宽度来计算的。

auto高度

在最简单的情况下，如果块级正常流元素设置为height:auto，显示时其高度将恰好足以包含其内联内容(包括文本)的行盒。高度为auto时，会在段落上设置一个边框，并认为没有内边距，这样下边框刚好在文本最后一行的下面，上边框刚刚好在文本第一行的上面。

如果块级正常流元素的高度设置为auto，而且只有块级子元素，其默认高度将是从最高块级子元素的外边框边界到最低块级子元素外边框边界之间的距离。因此，子元素的外边距会”超出”包含这些子元素的元素。不过，如果块级元素有上内边距或下内边距，或者有上边框或下边框，其高度则是从其最高子元素的上外边距边界到其最低子元素的下外边距边界之间的距离。

合并垂直外边距

垂直格式化的另一个重要方面是垂直相邻外边距的合并。这种合并行为只应用于外边距。如果元素有内边距和边框，它们绝对不会合并。(水平方向不会发生外边距合并)

li {margin-top: 10px; margin-bottom: 15px;}

每个列表项有10px的上外边距和15px的下外边距。不过，在显示这个列表时，相邻列表项之间的距离是15px，而不是25px。之所以会这样，是因为相邻外边距会沿着竖轴合并。换句话说，两个外边距中较小的一个会被较大的一个合并。

负外边距

负外边距确实对垂直格式化有影响，而且他们会影响外边距如何合并。如果垂直外边距都设置为负值浏览器会取两个外边距绝对值的最大值。如果一个正外边距与一个负外边距合并，会从正外边距减去这个负外边距的绝对值。

如果由于负外边距而导致元素彼此重叠，如何显示？

因为浏览器总会按从前到后的顺序显示元素，所以问的中后出现的正常流元素可能会覆盖较早出现的元素(如果这两个元素重叠的话)。

行内元素

基本术语和概念

• 匿名文本——指所有未包含在行内元素中的字符串
• em框——em框在字体中定义，也称为字符框，实际的字形可能比其em框更高或更矮
• 内容区——在非替换元素中，内容区为元素中各字符的em框串在一起构成的框；在替换元素中，内容区就是元素的固有高度再加上可能有的外边距，边框和内边距
• 行间距——是font-size和line-height的差值
• 行内框——这个框通过向内容区增加行间距来描述。对于非替换元素，元素的行内框高度刚好为line-height的值。对于替换元素，则恰好等于垂直方向7大属性值之和，因为行间距不应用到替换元素上
• 行框——这是包含该行中出现的行内框的最高点和最低点的最小框

非替换元素的内边距，边框和外边距对行内元素或其生成的框没有垂直效果，也就是说，他们不会影响元素行内框的高度(也不会影响包含该元素的行框的高度)

行内格式化

因此，虽然line-height只应用到行内元素上，但从某种程度上来说，块级元素中包含的各文本行本身都是行内元素，而不论是否真正用行内元素的标记包围起来，因此，这个模型能够很好的工作。

行内非替换元素

垂直对齐

vertical-align改变行内框的垂直对齐方式

管理line-height

• 对font-size有改变的元素结合使用em单位(使用em时，后代继承的是计算后的值px而不是em)
• 对line-height应用缩放因子，因为缩放因子被继承，所以后代元素的line-height都为1。

增加框属性

行内元素的框属性根本不会影响行框的高度。因此，很容易因为框属性而覆盖上下行的文本。同时，如果外边距为负还可能使之重叠。

行内替换元素

替换元素可以增加行框的高度，但不影响line-height。行框将包含替换元素(以及所有框的属性，与非替换元素不同)。
然而，在最常见的情况下，行内替换元素需要line-height这个属性，从而在垂直对齐时能正确的定位元素。例如，要记住vertical-align的百分数值要相对元素的line-height来计算。同时替换元素如SVG图像需要其将line-height传递到该替换元素的后代元素中去。

改变元素显示

可以使用display属性来影响用户代理显示的方式。不过，改变的只是元素的显示角色，而不是其本质。换句话说，让一个段落生成行内框并不会把这个段落真正变成一个行内元素。

行内块元素

行内块元素会作为替换元素放在行中。在行内块级元素内部，会像块级元素一样设置内容的格式。就像所有块级或行内替换元素一样，行内块元素也有属性width，height和text-align。