CSS 中的 width/height 和 HTML 属性中的 width/height 有什么区别？

一些 HTML 元素接受 width 和 height 作为属性。一些则不接受。例如

<!-- valid, works, is a good idea -->
<img width="500" height="400" src="..." alt="...">
<iframe width="600" height="400" src="..."></iframe>
<svg width="20" height="20"></svg>

<!-- not valid, doesn't work, not a good idea -->
<div width="40" height="40"></div>
<span width="100" height="10"></span>

这些属性有时被称为表现属性。需要知道的是，它们会被任何其他样式信息覆盖。 这使得它们成为理想的回退方案。

因此，如果 CSS 加载并包含以下声明

img {
  width: 400px;
}

…这将覆盖上面 <img> 标签中的 width="500"。表现属性是最弱的样式类型，因此它们会被任何 CSS 覆盖，即使是特异性非常低的选择器。

可能有点令人困惑的是，表现属性似乎具有很高的特异性。例如，这些内联样式确实非常强大

<img style="width: 500px; height: 400px;" src="..." alt="...">

使用内联样式（适用于任何元素，而不是少数元素），我们已经从应用 width 和 height 的最弱方式转变为最强方式之一。普通的 CSS 不会覆盖它，无论选择器具有什么特异性。如果我们需要从 CSS 覆盖它们，我们将需要 !important 规则。

img {
  width: 400px !important;
}

重申一下，元素上表现属性（例如 <img>、<iframe>、<canvas>、<svg>、<video>）是一个好主意。它们是页面加载时的回退大小和大小信息。它们在 <svg> 上特别有用，因为如果它们具有 viewBox 但缺少 width 和 height 属性，它们可能会以一种奇怪的方式自适应大小。浏览器甚至对图像进行特殊处理，其中 width 和 height 用于在流式图像的情况下保留从纵横比派生的正确空间，这对实现流畅的页面加载体验非常有用。

但表现属性也很弱，通常会被 CSS 覆盖。

评论