什么是 "Non-Replaced Inline Blocks"?
What Are "Non-Replaced Inline Blocks"?
背景
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification, chapter 9 Visual formatting model,指定:
Not all block container boxes are block-level boxes: non-replaced inline blocks and non-replaced table cells are block containers but not block-level boxes.
问题
Non-replaced inline blocks 在第 9/10 章的其他任何地方都没有提到。谁能帮我理解那些方框代表什么元素?
旁注
- 他们指的不是不可替换的内联元素,这是最常见的一种内联元素
- 它们也没有引用带有
display:inline-block
的元素,因为它们是 内联级框
编辑
- 从上面的引用可以推断出非替换内联块是块容器框。
我们还知道:
Inline-level elements are those elements of the source document that
do not form new blocks of content; the content is distributed in lines
(e.g., emphasized pieces of text within a paragraph, inline images,
etc.). The following values of the 'display' property make an element
inline-level: 'inline', 'inline-table', and 'inline-block'.
Inline-level elements generate inline-level boxes, which are boxes
that participate in an inline formatting context.
如果非替换内联块是块容器框,而带有display:inline-block
的元素是内联级框(即不是块级框,因此不是块容器框)然后它从逻辑上讲,非替换内联块 不能是具有 display:inline-block
.
的元素的结果
- 换句话说,内联块不是来自具有
display:inline-block
的元素。
其他备注
- 我对 replaced 与 non-replaced 的概念很满意,只是想了解 [=36] 的规范含义=]inline block 在上面的第一个引用中,当唯一的定义是 inline-block <-- 注意连字符。
术语inline block和inline-block指的是同一事物(内联级,块容器盒)并且是完全可以互换。带有 display: inline-block
的元素确实会生成一个行内块框,或一个行内块框(带或不带连字符)。连字符仅在那里,因此 CSS 能够将 inline-block
定义为单个关键字值。
非连字符形式在 CSS2 的第 9 节中多次出现,但没有出现在该规范的其他任何地方(它在 css-display-3 中出现一次,在一个句子几乎是从 CSS2 中逐字提取的,所以不算数)。我不知道为什么会这样,但非连字符形式指的是与连字符形式不同的东西并不是本意。事实上,第 9 节本身可以互换使用这两种形式——请参阅 section 9.2.4 以获取使用连字符形式的示例:
inline-block
This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
不过,我明白为什么 reader 会感到困惑。幸运的是,CSS2 规范的其余部分和大多数 CSS3 规范(我已经检查过了)在连字符形式的使用上都是一致的。
此外,单词 "box" 的存在与否不会改变 "inline-block" 的含义。通常,规范将其排除在外,因为它不必要地冗长;格式结构中所有不是文本的东西 运行 无论如何都是一个框,并且 "inline-block" 作为名词很好地脱口而出。
If non-replaced inline blocks are block container boxes, and elements with display:inline-block
are inline-level boxes (i.e. not block-level boxes and thus not block container boxes) then it logically falls out that non-replaced inline blocks cannot be the result of elements with display:inline-block
.
我觉得这里有些误会。上面的引用列出了 inline-blocks 作为非块级的块容器盒的例子;该引述的目的是向 reader 传达并非所有块容器都是块级盒,并非所有块级盒都是块容器——实际上,这两个概念是不同的,不应混为一谈.来自我对 的回答:
The only difference between a block box and an inline-block is that the former is block-level while the latter is inline-level. Hence the display values display: block
and display: inline-block
respectively. As both are block containers, there is no difference in how their contents are formatted.
因此,display: inline-block
会导致元素生成内联块(除非布局的其他部分强制将其格式化为块-级别,或 blockified,这完全是一个单独的主题)。这个内联块是被替换还是不被替换取决于元素;例如,带有 display: inline-block
的 <img>
元素生成一个替换的内联块,而带有 display: inline-block
的 <div>
元素生成一个非替换的内联块。
替换的内联块实际上不能形成块容器,因为它的内容是在 CSS 格式规则之外呈现的。这就是规范将 non-replaced 内联块区分为块容器的原因。真的没有比这更多的了。
背景
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification, chapter 9 Visual formatting model,指定:
Not all block container boxes are block-level boxes: non-replaced inline blocks and non-replaced table cells are block containers but not block-level boxes.
问题
Non-replaced inline blocks 在第 9/10 章的其他任何地方都没有提到。谁能帮我理解那些方框代表什么元素?
旁注
- 他们指的不是不可替换的内联元素,这是最常见的一种内联元素
- 它们也没有引用带有
display:inline-block
的元素,因为它们是 内联级框
编辑
- 从上面的引用可以推断出非替换内联块是块容器框。
我们还知道:
Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.). The following values of the 'display' property make an element inline-level: 'inline', 'inline-table', and 'inline-block'. Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context.
如果非替换内联块是块容器框,而带有
display:inline-block
的元素是内联级框(即不是块级框,因此不是块容器框)然后它从逻辑上讲,非替换内联块 不能是具有display:inline-block
. 的元素的结果
- 换句话说,内联块不是来自具有
display:inline-block
的元素。
其他备注
- 我对 replaced 与 non-replaced 的概念很满意,只是想了解 [=36] 的规范含义=]inline block 在上面的第一个引用中,当唯一的定义是 inline-block <-- 注意连字符。
术语inline block和inline-block指的是同一事物(内联级,块容器盒)并且是完全可以互换。带有 display: inline-block
的元素确实会生成一个行内块框,或一个行内块框(带或不带连字符)。连字符仅在那里,因此 CSS 能够将 inline-block
定义为单个关键字值。
非连字符形式在 CSS2 的第 9 节中多次出现,但没有出现在该规范的其他任何地方(它在 css-display-3 中出现一次,在一个句子几乎是从 CSS2 中逐字提取的,所以不算数)。我不知道为什么会这样,但非连字符形式指的是与连字符形式不同的东西并不是本意。事实上,第 9 节本身可以互换使用这两种形式——请参阅 section 9.2.4 以获取使用连字符形式的示例:
inline-block
This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
不过,我明白为什么 reader 会感到困惑。幸运的是,CSS2 规范的其余部分和大多数 CSS3 规范(我已经检查过了)在连字符形式的使用上都是一致的。
此外,单词 "box" 的存在与否不会改变 "inline-block" 的含义。通常,规范将其排除在外,因为它不必要地冗长;格式结构中所有不是文本的东西 运行 无论如何都是一个框,并且 "inline-block" 作为名词很好地脱口而出。
If non-replaced inline blocks are block container boxes, and elements with
display:inline-block
are inline-level boxes (i.e. not block-level boxes and thus not block container boxes) then it logically falls out that non-replaced inline blocks cannot be the result of elements withdisplay:inline-block
.
我觉得这里有些误会。上面的引用列出了 inline-blocks 作为非块级的块容器盒的例子;该引述的目的是向 reader 传达并非所有块容器都是块级盒,并非所有块级盒都是块容器——实际上,这两个概念是不同的,不应混为一谈.来自我对
The only difference between a block box and an inline-block is that the former is block-level while the latter is inline-level. Hence the display values
display: block
anddisplay: inline-block
respectively. As both are block containers, there is no difference in how their contents are formatted.
因此,display: inline-block
会导致元素生成内联块(除非布局的其他部分强制将其格式化为块-级别,或 blockified,这完全是一个单独的主题)。这个内联块是被替换还是不被替换取决于元素;例如,带有 display: inline-block
的 <img>
元素生成一个替换的内联块,而带有 display: inline-block
的 <div>
元素生成一个非替换的内联块。
替换的内联块实际上不能形成块容器,因为它的内容是在 CSS 格式规则之外呈现的。这就是规范将 non-replaced 内联块区分为块容器的原因。真的没有比这更多的了。