資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究CSS 單位 – %, em, rem, px, vh, vw
在 CSS 或層疊樣式表中，有許多單位可用於以不同方式表示不同屬性的值，以滿足需要。CSS 屬性如：字型大小、高度、寬度和行高等用於為容器定義不同的屬性。這些屬性的值可以以不同單位的形式賦值。
在本文中，我們將詳細瞭解不同的 CSS 單位，並透過實踐將其應用到程式碼中，以便了解每個單位的使用方法。
CSS 中有許多可用的 CSS 單位，但本文只介紹或討論以下屬性：
畫素 (px) − 畫素或 px 單位是最小單位，初學者通常使用它來設定不同長度屬性的值。從數學上講，1px 定義為 1 英寸的 1/96，即 1px = 1 英寸的 1/96。
語法
以下語法將向您展示如何使用畫素單位來設定不同長度屬性的值：
property_name: numeric_value px;
em − em 屬性用於設定長度屬性的值相對於元素的字型大小。如果我們將 em 與畫素進行比較，我們會發現 1em 等於 16px，即 1em = 16px。
語法
以下語法將向您展示如何使用畫素單位來設定不同長度屬性的值：
property_name: numeric_value em;
rem − rem 屬性設定屬性的值相對於 HTML 中根元素的字型大小，即 <html> 標籤。如果我們將 rem 與畫素進行比較，我們會發現 1rem 也等於 16px，即 1rem = 16px。
語法
以下語法將向您展示如何使用畫素單位來設定不同長度屬性的值：
property_name: numeric_value rem;
注意 − 建議在開發網頁或應用程式時不要使用畫素、em 和 rem 作為單位。因為，這將不允許 HTML 中的容器根據視口大小動態更改其寬度和高度，從而影響網頁的自適應性。
視口寬度 (vw) − 視口寬度或 vw 屬性用於根據使用者檢視網頁的當前視口寬度設定值。這將允許容器根據網頁的當前視口寬度動態更改其寬度。
語法
以下語法將向您展示如何使用畫素單位來設定不同長度屬性的值：
property_name: numeric_value vw;
視口高度 (vh) − 視口高度或 vh 與視口寬度屬性非常相似。vw 用於設定元素的動態寬度，而 vh 用於設定元素的動態高度。它將根據使用者更改的高度，動態地設定元素的高度相對於當前視口高度。
語法
以下語法將向您展示如何使用畫素單位來設定不同長度屬性的值：
property_name: numeric_value vh;
百分比 (%) − 百分比或 % 屬性也為我們想要分配給 HTML 文件中元素的屬性設定動態值。我們可以對每個屬性使用相同的 % 符號為其分配值，而無需像 vw 和 vh 那樣為每個屬性使用不同的符號。
語法
以下語法將向您展示如何使用畫素單位來設定不同長度屬性的值：
property_name: numeric_value %;
現在讓我們討論每個單位，並透過程式碼示例的實踐來了解它們之間的區別。
步驟
步驟 1 − 在第一步中，我們將定義不同的 HTML 元素，並在其上設定具有不同 CSS 單位的不同長度屬性。
步驟 2 − 在下一步中，我們將在 <head> </head> 標籤內定義的 <style> </style> 元素中，為上一步中定義的元素定義樣式。
步驟 3 − 在最後一步中，我們將使用不同的 CSS 單位為屬性賦值，並檢視它們之間的差異。
示例
以下示例將幫助您瞭解所有 CSS 單位之間的區別，並透過實踐瞭解它們：
<html>
<head>
<style>
.div1 {
margin-top: 5%;
width: 50%;
height: 20%;
background-color: aqua;
}
.div2 {
margin-top: 5vh;
width: 50vw;
height: 20vh;
background-color: aqua;
}
.para1 {
font-size: 16px;
}
.para2 {
font-size: 1.2em;
}
.para3 {
font-size: 1.3rem;
}
</style>
</head>
<body>
<h2>CSS units – %, em, rem, px, vh, vw</h2>
<div class = "div1"> width: 50% <br> height: 20% </div>
<div class = "div2"> width: 50vw <br> height: 20vh </div>
<p class = "para1"> Paragraph with font-size: 16px </p>
<p class = "para2"> Paragraph with font-size: 1.2em or 19.2px </p>
<p class = "para3"> Paragraph with font-size: 1.3rem or 20.8px </p>
</body>
</html>
在上面的示例中，我們使用了不同的 CSS 單位為元素分配高度、寬度和字型大小。
結論
在本文中，我們學習了不同的 CSS 單位，可以使用它們來設定 CSS 中長度屬性的值。我們透過程式碼示例的實踐，詳細討論了它們。
798 次瀏覽
