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

Question

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

Answer 1

LZ混淆了Doctype定义下分类各个标签的块级、内联概念和CSS的块级、内联概念。Doctype定义中的inline/block第一个跟Doctype定义有关，你看到的这个规则，是XHTMLStrict中定义的。那么这个语境下的inline和block是什么意思呢，它们是对html标签进行的分类（比如p、div、form都属于block，而span、a则属于inline），而和它们最终的CSS属性一点关系都没有（你可以把p的display改为inline，浏览器不会打死你，但是接替你的页面重构可能会）。这个在Doctype里定义的规则直接导致了浏览器parse整个文档的时候构建成的树是什么样子的。这里有一篇非常棒的关于元素嵌套规则及其对文档结构影响的说明，你可以读一下。总结：Doctype这个语境下面，inline和block指的是一种分类各个标签的方法，这个方法由各个标签的语义和默认的展现形式得来，区分它们主要是因为它们在不同的doctype里面会有不一样的嵌套约束，会影响到浏览器生成的文档结构。CSS的block和inlineLZ第二个代码规范的建议和CSS中高宽计算模式有关系：块级只包含块级的时候，进入的模式是块级∈块级模式，相关计算规则大致是内层宽自适应于外层的content-box的宽；外层的content-box自适应于内部所有块级容器的高；等等等等。块级只包含内联元素的时候，进入的模式是内联∈块级模式，相关的规则大致是：内联构成line-box，line-box的高由内联元素的高、line-height和vertical-align决定；通过断行算法，内联元素组成N个line-box，line-box的宽由块级元素的content-box的宽决定；各个line-box撑高块级；等等等等。块级元素同时包含块级元素和内联元素的时候，会为每个内联元素创建匿名块，从而拆解问题为块级/匿名块∈块级模式和内联∈块级/匿名块模式，回到规则1,2去计算各个元素的最终宽、高。LZ第二个代码规范可以这样解释：由于第三个规则的存在，所以为了能够在所有时候都能完美的控制块级元素的高和宽，内联元素和块级元素并列时，在内联元素外包裹一层块级元素。总结：在CSS属性这个语境下面，inline和block指的是元素最终的display属性，区分它们主要是因为它们会导致不一样的高宽计算模式。

Answer 2

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