一些 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 覆盖。
精彩的文章 - 我知道在 img 上添加 width 和 height 是有原因的,但我从未真正理解为什么。 谢谢您如此清晰地解释!
我一直都在剥离这些东西,以为自己在为互联网做贡献……现在我明白了逻辑和道理。 谢谢您如此清晰地解释!
这里有一些额外的信息