資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚學
法律學理解 CSS 絕對單位和相對單位
網頁上的字型、高度、寬度、邊距、填充等都透過長度單位來設定。例如，高度 100px，寬度 100px，字型 2em 等。這些長度單位分為絕對單位和相對單位。
CSS 絕對單位
絕對長度單位彼此之間是固定的。當輸出格式已知時，使用這些單位。以下是其中一些絕對長度單位：
序號 |
單位及描述 |
|---|---|
1 |
cm 釐米 |
2 |
mm 毫米 |
3 |
in 英寸 (1in = 96px = 2.54cm) |
4 |
px * 畫素 (1px = 1/96 英寸) |
5 |
pt 磅 (1pt = 1/72 英寸) |
6 |
pc 派卡 (1pc = 12 pt) |
絕對單位英寸
現在讓我們看一個使用絕對長度單位英寸 (in) 的示例：
示例
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
text-decoration: overline underline;
text-decoration-color: blue;
font-size: 0.3in;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>
絕對單位畫素
讓我們再看一個容器高度和寬度使用絕對長度單位畫素 (px) 設定的示例：
示例
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin-top: 10px;
height: 200px;
width: 200px;
overflow: auto;
margin: 20px;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
</body>
</html>
絕對單位磅
現在讓我們看一個使用絕對長度單位磅 (pt) 的示例：
示例
<!DOCTYPE html>
<html>
<head>
<style>
p.demo {
border: 2px solid blue;
padding: 35px 70px 50px 40px;
font-size: 20pt;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<p>This is a demo text.</p>
<p class="demo">This is another demo text.</p>
<p>Another demo text</p>
<h2>Demo Heading2</h2>
<p>Demo text</p>
</body>
</html>
CSS 相對單位
CSS 中的相對長度單位用於指定相對於其他長度屬性的長度。
相對於當前字型的 x 高度
序號 |
單位及描述 |
|---|---|
1 |
em 相對於元素的字型大小，即 4em 表示當前字型大小的 4 倍。 |
2 |
ex 相對於當前字型的 x 高度 |
3 |
ch 相對於 0 的寬度 |
4 |
rem 相對於根元素的字型大小 |
5 |
vw 相對於視口寬度的 1% |
6 |
vh 相對於視口高度的 1% |
7 |
vmin 相對於視口較小尺寸的 1% |
8 |
vmax 相對於視口較大尺寸的 1% |
9 |
% 相對於父元素 |
相對單位 em
讓我們看一個使用相對長度單位 em 的示例：
示例
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
text-decoration: overline underline;
text-decoration-color: blue;
font-size: 1.4em;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>
相對單位 vw
讓我們再看一個使用 vw 絕對單位設定字型的示例：
示例
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 10vw;
}
p {
font-size: 5vw;
}
</style>
</head>
<body>
<h1>Responsive Text Example</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum, rerum.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, necessitatibus officiis hic est in nobis!
</p>
</body>
</html>
相對單位 ch
讓我們再看一個使用 ch 絕對單位設定字型的示例：
示例
<!DOCTYPE html>
<html>
<head>
<style>
p.demo {
border: 2px solid blue;
padding: 35px 70px 50px 40px;
font-size: 2ch;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<p>This is a demo text.</p>
<p class="demo">This is another demo text.</p>
<p>Another demo text</p>
<h2>Demo Heading2</h2>
<p>Demo text</p>
</body>
</html>
更新於: 2024年1月2日
253 次瀏覽
廣告