CSS 可视化设计模型块框（Block boxex）和 行内框（Inline boxes）

Posted 2020-06-13

包含块（Cotaining Blocks）

在CSS2.1中，很多 box 的定位和大小都根据一个名为包含块 Containing Block 的矩形盒的边缘来计算。一般地，生成的 box 会充当其后代 box 的包含块；我们称盒为其后代“创建”了包含块。说“box的包含块”即是说“box所处的包含块”，而不是box所产生的包含块。

每个box会被赋予一个相对于其包含块的位置，但它不会被局限在其包含块内；它有可能溢出。

<div>
<table>
<tr><td>hi</td></tr>
</table>
</div>

如上，div 和 table 都是包含块。div 是 table 的包含块，同时table又是 td 的包含块。

 

块级元素（Block-level Elements）和 块框（Block Boxes）

块级元素（Block-level Element）：会生成一个块框（Block box），来包含子box和生成的内容。

块框（Block box）：同时也是一个块包含框（containing box），里面要么只包含块框（block boxes），要么只包含 行内框（inline boxes)。

匿名块框（Anonymous block boxes）：

<DIV>
Some text
<P>More text
</DIV>

如上，DIV似乎看起来包含行内（in-line）内容和块框，其实，依据CSS规定，在 some text 的周围是一个匿名块框，这样 DIV 块框里只包含块框了。

换句话说：如果一个块框（如上例中为DIV生成的框）在其中包含另外一个块框（如上例中的P），那么，我们强迫它只能包含块框。因此，上面的 “Some text” 被强制加到一个匿名的块框里面。

 

行内元素（Inline-level Elements）和 行内框（Inline Boxes）

行内元素（Inline-level Elements）：指能排在一行的元素，允许左右有其他元素，有 a，img，b 等。

行内框（Inline Boxes）：一个行内元素生成一个行内框。

匿名行内框（Anonymous Inline Boxes）

<P>Some <EM>emphasized</em> text</P>

如上，P元素生成一个块框，其内还有几个行内框。"emphasized"的框是一个行内元素（<em>）产生的行内框，而其它的框（"Some"和"text"）是块级元素（P）产生的行内框。后者就称为匿名行内控制框，因为它们没有与之相关的行内元素，所以，这些框被叫做匿名行内框。

 

display 属性

• block：元素产生一个块框。
• inline-block：元素产生一个行内级块框。行内块框的内部会被当作块块来格式化，而此元素本身会被当作行内级框来格式化。
• inline：元素产生一个或多个的行内框。
• none：元素不出现在格式化结构中（也就是说，元素既不产生框也不影响布局）。其后代元素也不产生任何框：该元素及其内容会被从格式化结构中完全移除。 ‘none‘ 的显示特性并不生成一个不可见的框；它根本不生成框。CSS包含了机制使一个元素能够在格式化结构中生成框而影响格式化，但本身不可见( visible 特性)。

我对块框（block boxes）和行内框（inline boxes）的理

• 如果一个框（boxes）里，有一个块级元素，那么这个框里的内容都会被当作块框来进行格式化，因为只要出现了块级元素，就会将里面的内容分块几块，每一块独占一行。
• 如果一个框（boxes）里，没有任何块级元素，那么这个框里的内容会被当成行内框来格式化，因为里面的内容是按照顺序成行的排列。