目录
一个元素的框的尺寸和位置的计算有时相对于某个特定的长方形，称为该元素的包含块。一个元素的包含块的定义如下：
如果不存在这样的前辈，根元素框的内容边创建该包含块。
不考虑定位，下面文档的包含块（C.B.）：
<HTML>
<HEAD>
<TITLE>Illustration of containing blocks</TITLE>
</HEAD>
<BODY id="body">
<DIV id="div1">
<P id="p1">This is text in the first paragraph...</P>
<P id="p2">This is text <EM id="em1"> in the
<STRONG id="strong1">second</STRONG> paragraph.</EM></P>
</DIV>
</BODY>
</HTML>
是这样创建的：
| 产生框的元素 | 创建C.B.的元素 |
|---|---|
| body | 初始C.B.（与用户端相关） |
| div1 | body |
| p1 | div1 |
| p2 | div1 |
| em1 | p2 |
| strong1 | p2 |
如果我们定位"div1"：
#div1 { position: absolute; left: 50px; top: 50px }
它的包含块不再是"body"；而是初始包含块（因为没有其它定位的前辈框）。
如果我们再定位"em1"：
#div1 { position: absolute; left: 50px; top: 50px }
#em1 { position: absolute; left: 100px; top: 100px }
包含块的表格成为：
| 产生框的元素 | 创建C.B.的元素 |
|---|---|
| body | 初始C.B. |
| div1 | 初始C.B. |
| p1 | div1 |
| p2 | div1 |
| em1 | div1 |
| strong1 | em1 |
"em1"定位后，它的包含块成为最靠近的前辈定位框（即，由"div1"创建的那一个）。
| 值： | <length> | <percentage> | auto | inherit |
| 初始值： | auto |
| 适用于： | 所有元素，除了行内非替换元素，表格行和行组。 |
| 可否继承： | 否 |
| 百分比： | 基于包含块的宽度 |
| 媒介： | 图形 |
该元素并不适用于非替换的行内元素。非替换行内元素框的宽度是它们中内容渲染后（在任何子元素相对偏移之前）的宽度。我们应该记得行内框排列在线框内。而线框的宽度由它们的包含块给出，但是可能由于出现浮动而被缩短。
替换元素的宽度是内在的，并且如果该属性值不是'auto'，用户端可能将其重新定比。
属性值的含义如下：
负的'width'值是非法的。
例如，下面的规则将段落的内容宽度固定为100点：
P { width: 100px }
一个元素的'width'，'margin-left'，'margin-right'，'left'和'right'属性的计算值取决于产生的框的类型，并互相影响。一般而言，计算值和指定值相同，'auto'被某个合适的值取代。不过还是有例外。下面这些情况需要加以考虑：
1-6包括相对定位。
'width'属性不适用。对'left'，'right'，'margin-left'或'margin-right'指定'auto'的效果是计算值为'0'。
对'left'，'right'，'margin-left'或'margin-right'指定'auto'的效果是计算值为'0'。指定'width'为'auto'将元素的内在宽度赋给计算值。
如果'left'或'right'设置为'auto'，它们的计算值为0。在其它属性间必须保持下面的约束：
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = 包含块的宽度
（如果边框的样式为'none'，边框宽度认为是'0'。）如果上述所有的属性指定了非'auto'的值，这些值被称为是“过度约束”，其中之一的计算值将不得不和它的指定值不同。如果'direction'属性为'ltr'，'margin-right'的指定值被忽略，并重新计算以满足上面的等式。如果'direction'为'rtl'，对'margin-left'采取上述的方法。
如果只有一个值指定为'auto'，它的计算值从等式中得出。
如果'width'设置为'auto'，则其它的'auto'值成为'0'而'width'从等式的剩余部分得到。
如果'margin-left'和'margin-right'为'auto'，它们的计算值相同。
如果'left'或'right'为'auto'，它们的计算值为0。如果'width'指定为'auto'，它的值是元素的内在宽度。如果某一个边距设置为'auto'，它的计算值由上述的约束给出。更进一步，如果两个边距都设置了'auto'，它们的计算值相等。
如果'left'，'right'，'width'，'margin-left'或'margin-right'指定为'auto'，它们的计算值为'0'。
如果'left'，'right'，'margin-left'或'margin-right'指定为'auto'，它们的计算值为'0'。如果'width'为 'auto'，它的值是元素的内在宽度。
确定这些元素计算值的约束为：
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = 包含块的宽度
（如果边框样式为'none'，边框宽度认为是'0'。这一约束的实现通过如下顺序的一系列替换而达到：
这一情况和前一情形类似，但是元素有一个内在宽度。替换的顺序是：
| 值： | <length> | <percentage> | inherit |
| 初始值： | 取决于用户端 |
| 使用于： | 所有元素，除了非替换行内元素和表格元素 |
| 可否继承： | 否 |
| 百分比： | 基于包含块的宽度 |
| 媒介： | 图形 |
| 值： | <length> | <percentage> | none | inherit |
| 初始值： | none |
| 适用于： | 所有元素，除了非替换行内元素和表格元素 |
| 可否继承： | 否 |
| 百分比： | 基于包含块的宽度 |
| 媒介： | 图形 |
这两个属性允许作者将框的宽度限制在一个确定的范围内。取值的含义如下：
下面的算法描述了这两个属性如何影响'width'属性的计算值：
用户端可以指定一个非负的'min-width'属性的最小值，该值根据不同的元素，甚至根据其它属性而不同。如果'min-width'小于该下限，或者是因为它显式地指定，或者是它设置为'auto'而其后的规则使它变得太小，用户端可以使用最小值作为计算值。
| 值： | <length> | <percentage> | auto | inherit |
| 初始值： | auto |
| 适用于： | 所有元素，除了非替换行内元素，表格列和列组 |
| 可否继承： | 否 |
| 百分比： | 见描述 |
| 媒介： | 图形 |
本属性不适用于非替换行内元素。非替换行内元素框的高度由元素的'line-height'值（或继承值）决定。
取值的含义如下：
负的'height'值是非法的。
在计算'top', 'margin-top'，'height'，'margin-bottom'和'bottom'的值时，必须对不同种类的框加以区别：
1-6包含相对定位。
如果'top'，'bottom'，'margin-top'或'margin-bottom'为'auto'，它们的计算值为0。'height'属性并不适用，但是框的高度由'line-height'属性给出。
如果'top'，'bottom'，'margin-top'或'margin-bottom'为'auto'，它们的计算值为0。如果'height'为'auto'，则计算值为内在高度。
如果'top'，'bottom'，'margin-top'或'margin-bottom'为'auto'，它们的计算值为0。如果'height'为'auto'，高度取决于该元素是否有任何块类子元素。如果它只包含行内子元素，高度等于最顶端的线框的顶到最底端的线框的底之间的距离。如果它包含块类子元素，高度等于最顶端的块类子框的顶边界到最底端的块类子框的底边界。只考虑常规流向中的子元素（即，浮动框和绝对定位框被忽略，只考虑相对定位框未偏移的情况）。注意，子框可以是一个匿名框。
对于绝对定位的元素，垂直方向的尺寸必须满足如下约束：
'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = 包含块的高度
（如果边框样式为'none'，认为宽度是'0'。）该约束的实现基于下列顺序的一系列替换：
这一情形和前述类似，只是元素有一个内在高度。替换的顺序变为：
有时将元素的高度控制在一个特定的范围内很有用。有两个属性提供了这样的功能：
| 值： | <length> | <percentage> | inherit |
| 初始值： | 0 |
| 适用于： | 所有元素，除了非替换行内元素和表格元素 |
| 可否继承： | 否 |
| 百分比： | 给予包含块的高度 |
| 媒介： | 图形 |
| 值： | <length> | <percentage> | none | inherit |
| 初始值： | none |
| 适用于： | 所有元素，除了非替换行内元素和表格元素 |
| 可否继承： | 否 |
| 百分比： | 给予包含块的高度 |
| 媒介： | 图形 |
这两个属性允许作者将框的高度限制在一定的范围内。取值含义如下：
下面的算法描述了这两个属性如何影响'height'属性的计算值：
在行内格式化内容的讨论中，用户端将行内框排列为垂直方向的线框的堆叠。线框高度是这样决定的：
空的行内元素产生空的行内框，但是这些框也包括边距，边白，边框和行高，因此和那些有内容的元素一样，影响上述的计算。
注意，如果线框内所有的框都对齐它们的底部，线框的高度恰好等于最高的框的高度。但是，如果框基于一个共同的基线对齐，线框的顶和底可能接触不到最高的框的顶和底。 box.
由于一个行内框的高度会和框内文字的高度有差别（例如，'line-height' > 1em），在渲染的字形符号的上方和下方可能有空白。字体尺寸和'line-height'计算值间的差别就称为差异。差异的一半就称为半差异。
用户端将字形放置在一个行内框的垂直中央，在顶和底加入半差异。例如，如果一段文字高度为'12pt'，而'line-height'值为'14pt'，则加入2pt的额外空白：1pt在顶部，1pt在底部。（这也适用于空的框，就好象这一空的框包含无限扁的字母。）
如果'line-height'值小于字体尺寸，最后的行内框的高度将小于字体尺寸，而渲染的字形将“渗出”框的外面。如果这样的一个框接触到一个行内框的边，渲染的字形也会“渗入”相邻的线框。
虽然非替换元素的边距、边框和边白并不加入行内框高度的计算（也就不参加线框高度的计算），它们还是在行内框周围得到渲染。这就意味着如果一个线框的高度小于框的外边，背景以及边白和边框的颜色可能会“渗入”相邻的线框。不过在这种情况下，有些用户端可能使用线框来“裁剪”边框和边白区域（即，不渲染它们）。
| 值： | normal | <number> | <length> | <percentage> | inherit |
| 初始值： | normal |
| 适用于： | 所有元素 |
| 可否继承： | 可 |
| 百分比： | 基于元素自身的字体尺寸 |
| 媒介： | 图形 |
如果该属性设置在一个块类元素，而后者的内容由行内元素组成，它指定了每一个生成的行内框的最小高度。
如果该属性设置在一个行内元素，它指定了该元素生成的每一个框的确切高度。（除了行内替换元素，它的框的高度由'height'属性给出。）
该属性取值的含义如下：
下例的三条规则设置了相同的行高：
DIV { line-height: 1.2; font-size: 10pt } /* number */
DIV { line-height: 1.2em; font-size: 10pt } /* length */
DIV { line-height: 120%; font-size: 10pt } /* percentage */
如果一个元素包含不止一个字体渲染的文本，用户端应该根据最大的字体尺寸来确定'line-height'的值。
一般地，如果对于一个段落中的所有行内框只有一个'line-height'值（而不是对于所有高的图形），上述规则将保证下续行的基线正好距离'line-height'的数值。这一点很重要，例如在表格中，不同字体的文本列必须对齐的情况时。
注意替换元素有一个'font-size'以及一个'line-height'属性，即使它们并不直接用来确定框的高度。'font-size'用来定义'em'及'ex'单位，而'line-height'在'vertical-align'属性中有一定的作用。
| 值： | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit |
| 初始值： | baseline |
| 适用于： | 行内元素和表格单元元素 |
| 可否继承： | 否 |
| 百分比： | 基于元素自身的'line-height' |
| 媒介： | 图形 |
该属性决定一个行内元素产生的框在一个线框内垂直方向的位置。下面的这些值仅在参考父行内元素或（如果该元素生成一个匿名行内框）父块类元素时，有意义；否则它们没有任何作用。
注意。这些属性的值在表格内容中含义略微有所不同容。请参见表格高度算法以了解更多细节。
其它值基于该生成的框所在的线框：