块级元素与内联元素并列? -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

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


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





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


展开
收起
杨冬芳 2016-06-14 18:12:15 2153 0
1 条回答
写回答
取消 提交回答
  • 杨冬芳
    IT从业

    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属性,区分它们主要是因为它们会导致不一样的高宽计算模式。

    2019-07-17 19:38:28
    赞同 展开评论 打赏
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载