資料結構
網路
關係型資料庫管理系統 (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.tw/static/images/simply-easy-learning.png" width = "50px" height = "50px" alt = "first"> <br> <img src = "https://tutorialspoint.tw/static/images/simply-easy-learning.png" width = "50" height = "50" alt = "second"> <br> <img src = "https://tutorialspoint.tw/static/images/simply-easy-learning.png" width = "100px" alt = "Third"> <br> <img src = "https://tutorialspoint.tw/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.tw/static/images/simply-easy-learning.png" class = "first" alt = "first"><br>
<img src = "https://tutorialspoint.tw/static/images/simply-easy-learning.png" class = "second" alt = "second"><br>
<img src = "https://tutorialspoint.tw/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.tw/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 次瀏覽
