4

我知道这<p>是专门用于内联元素的。但是，如果您使用将内联元素更改<span>为块级元素{ display:block }并将其包含在 a 中<p>怎么办？

IE。

<html>
<head>
<style>

  p {
    background: red;
    height: 100px;
    width: 100px;
    }

  p span {
    display: block;
    background: blue;
    height: 50px;
    width: 50px;
    }

</style>
</head>

<body>

<p>
  <span>I am a pizza</span>
</p>

</body>
</html>

从任何意义上说，这都是错误的吗？我知道这并不常见（即大多数人会质疑我为什么不只使用 div），但这是一种假设情况。它通过了验证测试，但它是否像所有的糟糕/糟糕的做法一样草率？如果您阅读该代码，您会嗤之以鼻吗？

4

2 回答 2

11

元素始终是 HTML 中的text/inline/phrase 元素，将元素内容限制为此类元素span的 HTML 语法规则仅与 H​​TML 相关。p因此它们不受 CSS 设置的影响，这些设置可能会在 CSS（渲染）意义上span成为块元素。

在 CSS 中，您可以为display属性分配任何定义的值，无论元素是什么样的。CSS 不了解 HTML 或其他标记语言规范中定义的元素的含义。

因此，没有正式的反对意见。

无论是好的风格，还是其他可以接受的，都比较复杂。规范中似乎没有对此做出任何声明，但可以合理地说您不应该徒劳地更改基本的渲染功能元素。例如，在正常情况下，你不应该使用span然后display: block在 CSS 中说，当有更合乎逻辑的使用div. 这个原则的一个原因是它使您的文档在非 CSS 呈现情况下或当您的全部或部分样式表未应用时保持更好的形状。

另一方面，如果您有一个文本段落并且您希望将其部分内容呈现为一个块，例如居中或缩进的行，可能具有延伸到可用宽度的背景颜色，您不会display 徒劳地改变。您不能使用divinside p，因此更自然的标记不可用。

由于该示例不是真实示例，因此无法确定在您的情况下部署此方法是否可行。

于 2013-09-21T13:30:03.067 回答
-4

它是 HTML5 有效的，在某些情况下也没有那么糟糕，例如

<p>
   This is some text <span class="highlight">I am a pizza</span> and this is some more text...
</p>

.highlight {
  background: yellow;
}
于 2013-09-21T08:18:28.943 回答