【不同的CSS】一文讓你瞭解CSS中的各類單位

【不同的CSS】一文讓你瞭解CSS中的各類單位

若彼岸繁華落盡，誰陪我看落日流年

寫在前面

對 CSS 佈局掌握程度決定你在 Web 開發中的開發頁面速度。隨着 Web 技術的不斷革新，實現各類佈局的方式已經多得數不勝數了。

最近利用碎片時間，大概用了半個月的時間整理了一個系列，本系列文章總結了 CSS 中的各類佈局，以及實現方式及其經常使用技巧。讓你經過該系列文章對 CSS 佈局有一個新的認識。

該系列的導航帖點我進入，裏面能夠快速跳轉到你想了解的文章(建議收藏)

CSS 中的單位大致分爲一下三種：

• 絕對單位: 不會由於其餘元素的尺寸變化而變化。
• 相對單位: 沒有一個固定的度量值，而是由其餘元素尺寸來決定的相對值。
• 其餘單位: 例如角度、顏色等。

在官方文檔中只有 絕對單位 和 相對單位，其餘單位在 CSS 中也具備單位的功能的值或者函數

絕對單位

CSS 中的絕對單位主要包括如下幾種

單位	名稱
cm	釐米
mm	毫米
q	四分之一毫米
in	英寸
pc	十二點活字
pt	點
px	像素

不過經常使用的絕對單位只有 px 像素。剩餘的都少使用。

相對長度單位

相對長度單位相對於其餘一些東西，好比父元素的字體大小，或者視圖端口的大小。使用相對單位的好處是，通過一些仔細的規劃，您可使文本或其餘元素的大小與頁面上的其餘內容相對應。以下是一些比較經常使用的相對單位。

單位	相對於	描述
%	父元素	百分比
em	在 font-size 中使用是相對於父元素的字體大小	若是父元素 font-size 是 20px ，那麼 2em 就是 40px, em 可精確到小數後3位
ex	字符「x」的高度	ex 指當前字體環境中小寫字母 x 的高度
ch	數字「0」的寬度	ch 指當前字體環境中數字 0 的寬度
rem	根元素的字體大小	若是根元素字體大小時 20px 那麼 2rem 就是 40px
vh	視窗高度的1%	vh 等於視窗高度的 1/100.例如，若是瀏覽器的高是 900px, 1vh 求得的值爲 9px
vw	視窗寬度的1%	vw 同理
vmin	視窗較小尺寸的1%	視口的寬度和高度中比較小的爲 100vmin
vmax	視圖大尺寸的1%	視口的寬度和高度中比較大的爲 100vmax

其餘單位

角度

關於角度的單位主要包含如下四個

單位	描述	何時等於圓
deg	度	360deg 等於一個圓
grad	梯度	400grad 等於一個圓
rad	弧度	2πrad 等於一個圓
trun	轉	1turn 等於一個圓

fr 單位

fr 用於分配必定長度內的剩餘空間。

顏色

rgb()

RGB是一個簡稱，全稱爲 Red-Green-Blue，即紅-綠-藍。RGB 色彩模式是工業界的一種顏色標準，是經過對紅、綠、藍三個顏色通道的變化以及它們相互之間的疊加來獲得各式各樣的顏色的。

hsl()

HSL是一個簡稱，全稱爲 Hue-Saturation-Lightness，即 色調-飽和度-亮度。HSL 色彩模式是一種將 RGB 色彩模型中的點在圓柱座標系中的表示法。

在 CSS 中使用 HSL 色彩模式是經過 hsl(H, S, L) 函數實現的

• H 表示色調(是色彩的基本屬性，就是日常所說的顏色名稱)，其值範圍爲 0 ~ 360 之間的一個角度。
• S 表示飽和度(飽和度是指顏色中灰色的含量)，其值範圍爲 0% ~ 100% 之間的百分值。
• L 表示亮度(亮度 是指顏色中黑色的含量)，其值使用百分值表示。0%表示黑色，50%表示標準色，100%表示白色。

rgba()

在原基礎上增長a，其中 A 爲 alpha 表示透明度。

hsla()

在原基礎上增長a，其中 A 爲 alpha 表示透明度。

HEX

使用十六進制整數指定顏色

calc() 函數

CSS3 新增了一個 calc() 函數，該函數容許在聲明 CSS 屬性值時執行一些計算。該函數支持四則運算。(乘法必須有一個乘數是數字，除法中 / 後面的樹必須是數字)

calc() 函數還支持嵌套語法。

示例代碼以下：

.banner {
  width: calc(100% - 80px);
}
複製代碼

嵌套語法

.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}
複製代碼

原生 CSS 貌似支持變量了，有時間研究一下