HTML标签是替换元素吗？

Question

首先，替换元素from W3的定义：

  

替换元素

     

内容超出范围的元素   CSS格式化模型，例如图像，嵌入式文档或小程序。   例如，HTML IMG元素的内容通常被替换为   其“src”属性指定的图像。经常更换元素   具有内在尺寸：内在宽度，内在高度，   和固有的比率。例如，位图图像具有固有的   宽度和以绝对单位指定的固有高度（从中）   显然可以确定内在比率。另一方面，   其他文件可能没有任何内在维度（例如，a   空白HTML文档）。

     

用户代理可能会认为替换元素没有任何内在元素   尺寸，如果认为这些尺寸可能泄漏   敏感信息给第三方。例如，如果是HTML   文件根据用户的银行余额改变了内在规模，   然后，UA可能希望表现得该资源没有内在性   尺寸。

     

CSS中不考虑替换元素的内容   渲染模型。

似乎并不关心label，对吧？

然后，我看到了this blog post，它给出了这一条规则：

  

您无法将生成的内容应用于替换元素。那是你   不能应用伪元素选择器：before或：after。

但我可以。

所以，我可以假设它不是一个被替换的元素（我缺乏经验来证明相反的情况）。

---

所以，根据MDN's doc关于line-height：

  

案例1 - 在块级元素上，行高CSS属性指定   元素内线框的最小高度。

     

案例2 - 在未替换的内联元素上，line-height指定高度   用于计算线框高度。

     

案例3 - 在替换的内联元素上，如按钮或其他输入元素，   line-height没有效果。

我设置JSfiddles来说明这些行为，比较一个块元素（div）和标签：

• Setting specific line-height directly on div and label - 确定
• Setting line-height on wrapping form, and override it on div and label - 不行，两个元素表现不同
• Setting line-height on wrapping form, label displayed as a block, overriding line-height on label and block - 确定

因此，label的行为类似于非替换元素，但是当覆盖line-height时，它不会。

我不明白，有人对此行为有任何解释吗？毕竟标签是替换元素吗？

在W3.org上，我看到label在Phrasing内容类别中，我见过this post，但我找不到答案问题。

^{测试是在Chrome 33（Mac）下完成的。}

Answer 1

  

HTML标签是替换元素吗？

没有

  

    

您无法将生成的内容应用于替换元素。也就是说，你不能在它们之前或之后应用伪元素选择器。

  

     

但我可以。

引用表示您无法在替换元素上使用:before或:after。

由于label 不是替换元素，因此可以使用:before和:after。

因此，您没有看到任何与您正在阅读的文档相矛盾的内容。

---

  

在包装表单上设置行高，并在div和label上覆盖它 - 不行，这两个元素的行为不同

他们应该表现不同。

表单内的内联框是表单的行高。

标签是内联的，因此其内联框位于表单的内联框内。标签的内联框小于它们所在的内联框。

div是一个块元素，因此它的内联框在div本身内部而不是在表单的内联框内。

如果您make the div display: inline，则比较两个display: inline元素而不是inline和block元素，并为每个元素得到相同的结果。