HTML width/height 属性 vs CSS width/height 属性

htmlweb developmentfront end technology更新于 2024/10/17 9:48:17

在开发网页时，开发人员经常需要管理不同 HTML 元素(例如图像、div 元素、span 元素等)的尺寸。开发人员可以使用 width 和 height CSS 属性或 HTML 属性来操作特定元素的尺寸。

在本教程中，我们将了解 width/height HTML 属性与 CSS 属性之间的区别。

width 和 height HTML 属性

HTML 中的 width/height 属性用于呈现。它使用"px"、"%"等单位来表示宽度和高度值，但不使用"rem"单位。此外，如果我们没有定义尺寸单位，则默认单位为"px"。

我们只能将其用于特定的 HTML 元素，例如"img"、"svg"、"canvas"等，而不能用于所有 HTML 元素。此外，这是定义元素尺寸最弱的方法。

语法

用户可以按照以下语法使用 HTML 的宽度和高度属性。

<img src="URL" width="50px" height="50px" alt="first">

在上述语法中，我们向"img"元素添加了宽度和高度属性，并以像素为单位定义了图像的尺寸。

示例

在下面的示例中，我们向网页添加了 4 张不同尺寸的图片。我们使用 HTML 属性在第一张图片中以"px"为单位定义宽度和高度。我们没有在第二张图片中定义单位，但尺寸与第一张图片相同，因为它使用"px"作为默认值。

在第三张图片中，我们只添加了"width"属性，它会根据图片的宽高比自动设置图片的高度。在最后一张图中，我们增加了图片的尺寸。

<html>
<body>
   <h2> Using the <i> Height and width attributes </i> in HTML. </h2>
   <img src = "https://www.cainiaomax.com/static/images/simply-easy-learning.png" width = "50px" height = "50px" alt = "first">
   <br>
   <img src = "https://www.cainiaomax.com/static/images/simply-easy-learning.png" width = "50" height = "50" alt = "second">
   <br>
   <img src = "https://www.cainiaomax.com/static/images/simply-easy-learning.png" width = "100px" alt = "Third">
   <br>
   <img src = "https://www.cainiaomax.com/static/images/simply-easy-learning.png" width = "300" height = "300px" alt = "Fourth">
</body>
</html>

CSS 的宽度和高度属性

CSS 还包含宽度和高度属性，用于设置 HTML 元素的尺寸。我们可以在 CSS 中访问 HTML 元素并应用宽度和高度属性。此外，我们还可以使用 CSS 的宽度和高度属性设置任何元素(包括 div 和 span)的尺寸。

语法

用户可以按照以下语法使用 CSS 的宽度和高度属性。

CSS selector {
   height: value;
   width: value;
}

在上述语法中，我们使用 CSS 选择器选择了一个特定的 HTML 元素，并添加了 height 和 width CSS 属性来设置该元素的尺寸。

示例

在下面的示例中，我们向网页添加了三张图片。此外，我们还为每张图片指定了不同的类名。在 CSS 中，我们使用类名访问图片，并使用 width 和 height CSS 属性设置尺寸。

我们对第二张图片使用了"rem"单位，但该单位无法与 HTML 属性一起使用。在输出中，用户可以观察到图片的尺寸。

<html>
<head>
   <style>
      .first {
         height: 100px;
         width: 100px;
      }
      .second {
         height: 10rem;
         width: 10rem;
      }
      .third {
         height: 100;
         width: 100;
      }
   </style>
</head>
<body>
   <h2> Using the <i> Height and width properties </i> in CSS </h2>
   <img src = "https://www.cainiaomax.com/static/images/simply-easy-learning.png" class = "first" alt = "first"><br>
   <img src = "https://www.cainiaomax.com/static/images/simply-easy-learning.png" class = "second" alt = "second"><br>
   <img src = "https://www.cainiaomax.com/static/images/simply-easy-learning.png" class = "third" alt = "third">
</body>
</html>

HTML 宽度/高度属性 VS CSS 宽度/高度属性

使用 HTML 宽度/高度属性定义图像尺寸是最不可靠的方法。如果我们同时使用 HTML 属性和 CSS 属性来定义尺寸，则 CSS 属性的值会覆盖 HTML 属性的值，这是主要区别。

通过示例，让我们了解 HTML 宽度/高度属性与 CSS 属性之间的区别。

示例

在下面的示例中，我们定义了两个 div 元素。我们使用 CSS 中的类名访问第一个 div 元素并设置尺寸。对于第二个 div 元素，我们使用 HTML 属性来设置尺寸。在输出中，我们可以观察到，由于 div 元素不支持 HTML 宽度/高度属性，因此第二个 div 元素的尺寸不会改变。

此外，我们还使用 HTML 属性来设置图像的尺寸。此外，我们在 CSS 中访问图像并设置尺寸。在输出中，我们可以看到 width/height CSS 属性的值覆盖了 width/height HTML 属性的值。

<html>
<head>
   <style>
      .test {
         height: 100px;
         width: 200px;
         background-color: yellow;
      }
      img {
         height: 100px;
         width: 300px;
      }
   </style>
</head>
<body>
   <h2> Difference between the <i> height/css HTML attribute and CSS properties. </i> </h2>
   <div class = "test"> Using CSS properties </div><br>
   <div height = "100px" width = "200px"> Using the height/css HTML attribute. </div>
   <br>
   <img src = "https://www.cainiaomax.com/images/logo.png?v2" alt = "logo" height = "30px" width = "50px">
</body>
</html>

差异表

差异	HTML 的 width/height 属性	CSS 的 width/height 属性
用法	用于设置 HTML 元素(例如"img"、"svg"、"canvas"等)的初始尺寸。	可与任何 HTML 一起使用元素。
控件	它设置 HTML 元素的静态尺寸，我们无法更改。	它设置 HTML 元素的动态尺寸，我们可以使用 JavaScript 或 JQuery 更改。
覆盖	CSS 属性可以覆盖它。	它可以覆盖 width/height HTML 属性的值。
特异性	特异性较低，定义尺寸的方式最弱。	特异性较高。
响应性	由于它为 HTML 元素设置静态尺寸，我们对响应性的控制有限。	使用媒体查询，我们可以更好地控制响应性。
内联/外部	它与HTML 标签。	它可以是内联的、内部的或外部的。