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

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 价值 200 美元的免费积分!

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

<!-- 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 覆盖。