CSS 中的"line box"是什么意思

Question

在css文档中有很多提到行框(例如这里)。这到底是什么意思?

Answer 1

css2.1规范在9.4.2 Inline formatting contexts章节中解释了这个概念http://www.w3.org/TR/CSS2/visuren.html#inline-formatting

包含构成一行的方框的矩形区域称为行框。

…

当多个行级盒不能水平放置在一个行盒内时，将它们分布在两个或多个垂直堆叠的行盒中。因此，段落就是行框的垂直堆叠。

…

当行内框的宽度超过行框的宽度时，它被分割成几个行框，这些行框分布在几个行框中。如果行内框不能被分割(例如，行内框包含单个字符，或者语言特定的断行规则不允许行内断行，或者行内框受到nowrap或pre的空白值的影响)，则行内框将溢出行内框。

Answer 2

在本例中，您还可以看到包含行本身的框的类型是line-box。它也有边界。http://jsfiddle.net/LyVf5/

HTML:

<p>
    <span>With HTML/CSS, *everything* is laid out using a box.</span> 
    <br>
    <br>
    <span>This is a &lt;span>.  It has a border around it, so you can see how your browser positions it.  Notice that when the line wraps, the "box" that the line is in wraps also.  Maybe this is what you're asking about?  More text...  This is a &lt;span>.  It has a border around it.  Notice that when the line wraps, the "box" that the line is in wraps also.    More text...</span>
</p>

CSS:

p{ 
    margin: 2em; 
}
span{ 
    border: 1px dotted gray; 
    line-height: 150%; 
    padding: 3px; 
}