CSS规范:块级框,块容器框和块框

Joy*_*Joy 8 css

我正在阅读CSS Spec 2.1并发现难以区分的概念:

除了后面章节中描述的表格框和替换元素之外,块级框也是块容器框.块容器框要么只包含块级框,要么建立内联格式化上下文,因此只包含内联级框.并非所有块容器框都是块级框:未替换的内联块和未替换的表格单元是块容器,而不是块级框.也是块容器的块级框称为块框.

我可以将上面的描述解释如下吗?

在此输入图像描述

Bol*_*ock 8

你的解释是正确的.

以下是一些其他细节:

  • 表格框不是块容器的原因是因为它建立了表格布局,而不是块布局.内容进入单元格元素而不是表格元素,这就是为什么单元格框是块容器而不是表格框本身.

  • 替换元素不包含任何其他内容,因此不能是块容器.

  • 块框和内联块之间的唯一区别是前者是块级,而后者是内联级.因此,显示值display: blockdisplay: inline-block分别.由于两者都是块容器,因此它们的内容格式没有区别.

请注意,替换的元素和表格框可以是内联级别或块级别.内联表和内联替换元素只是从您引用的部分中排除,因为该部分仅适用于块级框; 您可以在第9部分或第10部分和第17部分中找到对它们的引用.

此外,即使块容器盒只能包含块级框或内联级框,您仍然可以在同一个块容器框中混合使用它们.在内部,它只是通过匿名块框分隔块级和内联级.

  • 理解视觉格式化模式感觉非常复杂。特别是子主题 9.2 和 9.4。我希望该标准能够更好地解释这些主题,就像它对其他主题所做的那样。 (2认同)
  • @Binary_10:该标准并不(始终)旨在成为网络开发人员的资源。它的编写方式是为了让浏览器开发人员尽可能清楚地阐明所有内容。也就是说,我认为 CSSWG 正在努力让现代规范更容易理解。 (2认同)
  • 那么开发者获得更深入的知识并打下坚实的基础(CSS)的最佳资源是什么? (2认同)