CSS單位

了解如何使用CSS中的單元

您每天在CSS中將使用的一件事是單位。它們用於設置長度，填充，邊距，對齊元素等。

像px，em，rem或百分比。

他們無處不在。也有一些相對未知的。

像素

使用最廣泛的測量單位。像素實際上與屏幕上的物理像素不相關，因為設備之間的差異很大（請考慮高DPI設備與非視網膜設備）。

有一個約定可使本機在設備之間一致地工作。

百分比

另一個非常有用的度量，百分比使您可以以該父元素的相應屬性的百分比來指定值。

例子：

.parent {
  width: 400px;
}

.child {
width: 50%; /* = 200px */
}

實際測量單位

我們擁有從外界翻譯而來的度量單位。它們通常在屏幕上無用，對於打印樣式表很有用。他們是：

  • cm一厘米（映射到37.8像素）
  • mm一毫米（0.1厘米）
  • q四分之一毫米
  • in一英寸（映射到96像素）
  • pt一分（1英寸= 72分）
  • pc1點（1點= 12點）

相對單位

  • em是分配給該元素的值font-size，因此其確切值會在元素之間變化。它不會根據所使用的字體而改變，而僅取決於字體大小。在版式中，這測量的是寬度m信。
  • rem類似於em，但它不會改變當前元素的字體大小，而是使用根元素（html） 字體大小。您只需設置一次該字體大小，然後rem將是所有頁面上一致的度量。
  • ex就好像em，但已插入以測量寬度m，它會測量x信。它可以根據所使用的字體和字體大小而變化。
  • ch就好像ex但不是測量高度x它測量寬度0（零）。

視口單位

  • vw這視口寬度單位代表視口寬度的百分比。50vw表示視口寬度的50％。
  • vh這視口高度單位代表視口高度的百分比。50vh表示視口高度的50％。
  • vmin這視口最小單位代表高度或寬度之間的最小值（以百分比表示）。30vmin是當前寬度或高度的30％，具體取決於哪一個較小
  • vmax這視口最大單位代表高度或寬度之間的最大值（以百分比表示）。30vmax是當前寬度或高度的30％，取決於哪一個更大

分數單位

fr是分數單位，它們用於CSS網格將空間分成幾部分。

免費下載我的CSS手冊


更多CSS教程：


在線技術維基！