CSS - 測量單位

你好，未來的網頁設計師們！今天，我們將踏上一段令人興奮的旅程，探索CSS測量單位的世界。作為你們友好的鄰居電腦老師，我在這裡指導你們了解這個網頁設計的重要方面。所以，拿起你們的虛擬尺規，讓我們來度量一些CSS吧！

CSS - Measurement Units

長度單位

在CSS中，我們有各種方式來測量和定義大小。這就像有一個滿滿不同尺規的工具箱，每個都適合特定的任務。讓我們從基礎開始：

這些是直觀的，就像尺規上的英寸：

以下是一個簡單的例子：

.box {
width: 100px;
height: 2in;
margin: 10mm;
}

在這段代碼中，我們創建了一個寬100像素、高2英寸、四邊距各10毫米的盒子。這就像建造一個微小而精確的紙盒！

現在，讓我們來谈谈 'em' 單位。它是一個相對單位，基於元素的字体大小。把它當作一個根據周圍環境變化大小的变色龍。

.parent {
font-size: 16px;
}

.child {
font-size: 1.5em; /* 這將是 24px */
padding: 2em;     /* 這將是 48px */
}

在這個例子中，子元素的字体大小是其父元素的1.5倍，其內邊距是其自身字体大小的兩倍。這就像一個俄羅斯套娃大小！

'ch' 單位基於字符 '0'（零）的寬度。它對於在等寬字体中創建列佈局特別有用。

.code-block {
width: 80ch;
font-family: monospace;
}

這創建了一個寬80個字符的代碼塊，對於那些懷念80列終端的日子來說，這是完美的！

'rem' 代表 "根em"。它與 'em' 相似，但它始終相對於根元素（通常是 <html>），而不是父元素。

html {
font-size: 16px;
}

.box {
font-size: 1.5rem; /* 始終為 24px，無論父元素如何 */
padding: 2rem;     /* 始終為 32px */
}

這對於在整個文件中保持一致的尺寸非常有用，就像為你的整個網站擁有一個總體藍圖。

'lh' 代表元素的 "行高"，而 'rlh' 是 "根行高"。這些是較新的單位，非常適合排印中的垂直節奏。

.paragraph {
line-height: 1.5;
margin-bottom: 1lh;
}

這將段落下方的邊距設定為正好一行高，創造出一個和諧的垂直節奏。這就像指揮一個文本的樂團！

'vh' 和 'vw' 分別代表 "視窗高度" 和 "視窗寬度"。它們是基於視窗大小的百分比單位。

.hero {
height: 100vh;
width: 100vw;
}

這創建了一個始終填滿整個屏幕的英雄部分，無論設備大小如何。這就像擁有一個總是完美適合的響應式廣告牌！

這些單位基於視窗的較小或較大的尺寸，取適當的一個。

.square {
width: 50vmin;
height: 50vmin;
}

這創建了一個始終為視窗較小尺寸一半的完美正方形。這就像擁有一個始終保持比例的變形正方形！

'vb' 代表 "視窗區塊大小"。它與 'vh' 相似，但它尊重文件的書寫模式。

.sidebar {
width: 20vb;
}

這創建了一個始終為視窗區塊尺寸20%的側邊欄，這對於具有不同書寫方向的多語種網站來說非常好。

'vi' 是 "視窗內聯尺寸"。它與 'vw' 相似，但再次，它尊重書寫模式。

.header {
height: 10vi;
}

這創建了一個始終為視窗內聯尺寸10%的標題，無縫地適應不同的書寫模式。

CSS中的百分比總是相對於某個東西。讓我們看看它在實際操作中的情況：

.container {
width: 80%;
margin: 0 auto;
}

.child {
width: 50%;
padding: 5%;
}

在這裡，容器是其父元素寬度的80%，並且居中。子元素是容器寬度的一半，其內邊距是容器寬度的5%。這就像俄羅斯套娃，但帶有無形的盒子！

有時候，CSS屬性不需要任何單位。讓我們看一些例子：

.box {
opacity: 0.5;
line-height: 1.5;
z-index: 100;
}

在這裡，透明度是0到1之間的值，行高是字体大小的倍數，z-index只是一個用于堆疊順序的普通數字。這就像有一個音量旋鈕、一個文本間距器和一個層次排序器合而為一！

至此，各位！我們已經穿越了CSS測量單位的領地，從熟悉的像素到神秘的視窗單位。記住，選擇正確的單位就像為工作選擇正確的工具一樣——它可以使你的生活更輕鬆，並使你的設計更加健壯。所以，勇往直前，負責任地度量吧！

Credits: Image by storyset