背景
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification,第9 Visual formatting model章指定:
并非所有块容器框都是块级框:未替换的内联块和未替换的表格单元是块容器,但不是块级框。
问题
未替换的内联块在第9/10章的其他任何地方都没有提到。有人可以帮我理解这些方框代表什么元素?
附注
display:inline-block
的元素,因为它们是内嵌级框 修改
我们也知道:
内联级元素是源文档的那些元素 不要形成新的内容块;内容按行分发 (例如,段落中强调的文本片段,内嵌图像, 等等。)。 'display'属性的以下值构成一个元素 内联级:'内联','内联表'和'内联块'。 内联级元素生成内联级框,即框 参与内联格式化上下文。
如果未替换的内联块是块容器盒,则display:inline-block
的元素是内嵌级框(即不是块级框,因此不是阻止容器框)然后从逻辑上看,未替换的内联块不能是具有display:inline-block
的元素的结果。
display:inline-block
的元素。其他注释
答案 0 :(得分:1)
术语内联块和内联块指的是同一个东西(内联级别的块容器盒),并且完全可以互换。实际上,具有display: inline-block
的元素会生成内联块框或内联块框(带或不带连字符)。连字符仅在那里,因此CSS能够将inline-block
定义为单个关键字值。
在CSS2的第9部分中,非连字符形式出现了好几次,但在该规范的其他任何地方都没有出现(它出现在css-display-3中,在几乎逐字逐句地从CSS2中提升,所以它不算数)。我不知道为什么会这样,但非连字形式的意图并不是指与连字形式不同的东西。事实上,第9节本身可以互换地使用这两种形式 - 请参阅section 9.2.4以获取正在使用的带连字符的形式的示例:
<强>内联块强>
此值使元素生成内联级块容器。内联块的内部被格式化为块框,元素本身被格式化为原子内联级框。
我可以看到为什么读者会感到困惑。幸运的是,CSS2规范的其余部分以及大多数CSS3规范(无论如何我都已经检查过)在使用带连字符的形式时都是一致的。
此外,是否存在单词&#34; box&#34;并没有改变&#34; inline-block&#34;的含义。一般来说,规范将其排除在外,因为它不必要地冗长;格式化结构中不是文本运行的所有内容都是一个框,并且&#34;内联块&#34;因为一个名词很好地滚出了舌头。
如果未替换的内联块是块容器盒,而
display:inline-block
的元素是内嵌级框(即不是块级框,因而不是阻止容器框)那么它在逻辑上不符合未替换的内联块不能是元素的结果与display:inline-block
。
我认为这里存在一些误解。上面的引用列出了内联块作为块容器盒的一个例子,它不是块级的;该引用的目的是向读者传达并非所有块容器都是块级框,并且并非所有块级框都是块容器 - 事实上,这两个概念是截然不同的,不应该混为一谈。从我对this related question的回答:
块框和内联块之间的唯一区别是前者是块级,而后者是内联级。因此,显示值分别为
display: block
和display: inline-block
。由于两者都是块容器,因此它们的内容格式没有区别。
因此,再次,display: inline-block
会导致元素生成内联块(除非布局的其他部分强制将其格式化为块级,或阻止,这是一个单独的主题)。是否更换或不替换此内联块取决于元素;例如,<img>
元素display: inline-block
生成替换的内联块,而带<div>
的{{1}}元素生成未替换的内联块。
替换的内联块实际上不能形成块容器,因为它的内容是在CSS格式规则之外呈现的。这就是规范将未替换的内联块区分为块容器的原因。它确实没有比这更多的东西了。