块级元素与内联元素并列？

Question

最近在网上看到一个关于HTML元素嵌套规则的图片，在flow 下block 和 inline 是并列的。 但在另一个地方看到，块级元素与块级元素并列，内联元素与内联元素并列。各位同仁，这两种说法哪个比较准确？ 还是说都是对的，但存在一些特殊情况？

<!-- 几个示例 -->


<div>
    <h1>块级元素与内联元素并列</h1>
    <span>这种写法对吗？</span>
</div>





<div>
    <h1>块级元素与内联元素并列</h1>
    <img src="..." alt="这种写法对吗？" />
</div>

Answer 1

LZ混淆了Doctype定义下分类各个标签的块级、内联概念和CSS的块级、内联概念。

Doctype定义中的inline/block

第一个跟Doctype定义有关，你看到的这个规则，是XHTML Strict中定义的。那么这个语境下的inline和block是什么意思呢，它们是对html标签进行的分类（比如p、div、form都属于block，而span、a则属于inline），而和它们最终的CSS属性一点关系都没有（你可以把p的display改为inline，浏览器不会打死你，但是接替你的页面重构可能会）。

这个在Doctype里定义的规则直接导致了浏览器parse整个文档的时候构建成的树是什么样子的。
这里有一篇非常棒的关于元素嵌套规则及其对文档结构影响的说明，你可以读一下。

总结：Doctype这个语境下面，inline和block指的是一种分类各个标签的方法，这个方法由各个标签的语义和默认的展现形式得来，区分它们主要是因为它们在不同的doctype里面会有不一样的嵌套约束，会影响到浏览器生成的文档结构。

CSS的block和inline

LZ第二个代码规范的建议和CSS中高宽计算模式有关系：

1. 块级只包含块级的时候，进入的模式是块级∈块级模式，相关计算规则大致是
   内层宽自适应于外层的content-box的宽；
   外层的content-box自适应于内部所有块级容器的高；
   等等等等。
2. 块级只包含内联元素的时候，进入的模式是内联∈块级模式，相关的规则大致是：
   内联构成line-box，line-box的高由内联元素的高、line-height和vertical-align决定；
   通过断行算法，内联元素组成N个line-box，line-box的宽由块级元素的content-box的宽决定；
   各个line-box撑高块级；
   等等等等。
3. 块级元素同时包含块级元素和内联元素的时候，会为每个内联元素创建匿名块，从而拆解问题为块级/匿名块∈块级模式和内联∈块级/匿名块模式，回到规则1,2去计算各个元素的最终宽、高。

LZ第二个代码规范可以这样解释：由于第三个规则的存在，所以为了能够在所有时候都能完美的控制块级元素的高和宽，内联元素和块级元素并列时，在内联元素外包裹一层块级元素。

总结：在CSS属性这个语境下面，inline和block指的是元素最终的display属性，区分它们主要是因为它们会导致不一样的高宽计算模式。

Answer 2

XHTML Strict 是一个很严格的标准，现在不是很常用，甚至可以认为已经被弃用了。
目前主流的 HTML5 的规则是：随便写。