CSS單位

了解如何使用CSS中的單元

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

pxemrem或百分比。

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

像素

使用最廣泛的測量單位。像素實際上與屏幕上的物理像素不相關,因為設備之間的差異很大(請考慮高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教程: