数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究HTML width/height 属性与 CSS width/height 属性的比较
在开发网页时，开发者经常需要管理不同HTML元素（如图像、div元素、span元素等）的大小。开发者可以使用 width 和 height CSS 属性或 HTML 属性来操作特定元素的尺寸。
在本教程中，我们将了解 HTML width/height 属性和 CSS 属性之间的区别。
Width 和 Height HTML 属性
HTML 中的 width/height 属性用于表示。它接受以“px”、“%”等单位表示的宽度和高度值，但不接受“rem”单位。此外，如果我们不定义尺寸单位，则默认单位为“px”。
我们只能将其用于特定的 HTML 元素，例如“img”、“svg”、“canvas”等，而不能用于所有 HTML 元素。此外，这是定义元素尺寸最弱的方式。
语法
用户可以按照以下语法使用 HTML 的 width 和 height 属性。
<img src="URL" width="50px" height="50px" alt="first">
在上面的语法中，我们将 width 和 height 属性添加到“img”元素，并以像素为单位定义图像的尺寸。
示例
在下面的示例中，我们向网页添加了 4 个不同尺寸的图像。我们使用 HTML 属性以“px”单位定义第一个图像的宽度和高度。在第二个图像中，我们没有定义单位，但尺寸与第一个图像相同，因为它采用“px”作为默认值。
在第三个图像中，我们只添加了“width”属性，它会根据图像的纵横比自动设置图像的高度。在最后一个图像中，我们增加了图像的尺寸。
<html> <body> <h2> Using the <i> Height and width attributes </i> in HTML. </h2> <img src = "https://tutorialspoint.com/static/images/simply-easy-learning.png" width = "50px" height = "50px" alt = "first"> <br> <img src = "https://tutorialspoint.com/static/images/simply-easy-learning.png" width = "50" height = "50" alt = "second"> <br> <img src = "https://tutorialspoint.com/static/images/simply-easy-learning.png" width = "100px" alt = "Third"> <br> <img src = "https://tutorialspoint.com/static/images/simply-easy-learning.png" width = "300" height = "300px" alt = "Fourth"> </body> </html>
Width 和 Height CSS 属性
CSS 也包含 width 和 height 属性，用于设置 HTML 元素的尺寸。我们可以使用 CSS 访问 HTML 元素并应用 width 和 height 属性。此外，我们可以使用 width 和 height CSS 属性设置任何元素（包括 div 和 span）的尺寸。
语法
用户可以按照以下语法使用 width 和 height 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://tutorialspoint.com/static/images/simply-easy-learning.png" class = "first" alt = "first"><br>
<img src = "https://tutorialspoint.com/static/images/simply-easy-learning.png" class = "second" alt = "second"><br>
<img src = "https://tutorialspoint.com/static/images/simply-easy-learning.png" class = "third" alt = "third">
</body>
</html>
Width/height HTML 属性与 Width/height CSS 属性的比较
使用 width/height HTML 属性来定义图像尺寸是最弱的方式。如果我们同时使用 HTML 属性和 CSS 属性定义尺寸，则 CSS 属性的值会覆盖 HTML 属性的值，这是主要区别。
让我们通过示例来了解 width/height HTML 属性和 CSS 属性之间的区别。
示例
在下面的示例中，我们定义了两个 div 元素。我们在 CSS 中使用类名访问第一个 div 元素并设置其尺寸。对于第二个 div 元素，我们使用 HTML 属性来设置尺寸。在输出中，我们可以看到由于 div 元素不支持 width/height 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://tutorialspoint.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 标签内联。 |
它可以是内联、内部或外部。 |
本教程向我们讲解了 HTML width/height 属性和 CSS 属性之间的区别。使用 HTML 属性定义尺寸是最弱的方式，因此开发者应该避免使用它，而应使用 CSS 属性。
342 次浏览
