在css中什么意思是"线框"

Question

在css文档中有很多提到的线框(例如这里).它究竟意味着什么？

Answer 1

CSS 2.1规范解释了http://www.w3.org/TR/CSS2/visuren.html#inline-formatting9.4.2 Inline formatting contexts一节中的概念

包含形成一条线的框的矩形区域称为线框.

...

当多个内联级框不能在一个线框内水平放置时,它们分布在两个或多个垂直堆叠的线框中.因此,段落是线框的垂直堆叠.

...

当内联框超出线框的宽度时,它将被拆分为多个框,这些框分布在多个线框中.如果无法拆分内联框(例如,如果内联框包含单个字符,或者特定于语言的分词规则不允许在内联框中出现中断,或者内联框受到nowrap或pre的空白值的影响),然后内联框溢出线框.

Answer 2

在这个小提琴中，您还可以看到包含线本身的那种盒子是线盒。它也有边界。 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; 
}