卡卡網(wǎng)

CSS有很多長度單位，但不是任何一個單位都適合用于任何設(shè)計上。本文將介紹CSS的15個長度單位使用區(qū)別。

長度是一個數(shù)字后跟一個長度單位，例如10px， 2em等。

設(shè)置不同的長度值，使用 px（像素）：

h1 {
  font-size: 60px;
}

p {
  font-size: 25px;
  line-height: 50px;
}

注意：數(shù)字和單位之間不能出現(xiàn)空格。但是，如果值為 0，則可以省略單位。

對于某些 CSS 屬性，允許負長度。

長度單位有兩種類型：絕對長度和相對長度。

 
CSS長度單位有兩種類型：絕對單位和相對單位

絕對長度

絕對長度單位是固定的，以任何這些單位表示的長度將顯示為該大小。

不建議在屏幕上使用絕對長度單位，因為屏幕尺寸變化很大。但是，如果輸出介質(zhì)已知，則可以使用它們，例如用于打印布局。

* 像素 (px) 與查看設(shè)備有關(guān)。對于低 dpi 設(shè)備，1px 是顯示器的一個設(shè)備像素（點）。對于打印機和高分辨率屏幕，1px 意味著多個設(shè)備像素。

相對長度

相對長度單位指定相對于另一個長度屬性的長度。相對長度單位在不同渲染介質(zhì)之間縮放得更好。

提示：em 和 rem 單位在創(chuàng)建完美可擴展的布局方面非常實用！
視口  = 瀏覽器窗口大小。如果視口寬 50 厘米，則 1vw = 0.5 厘米。

文章推薦

• CSS單位PX、EM、REM、%、VW 和 VH 有什么區(qū)別？

標簽: css  css3  css單位  VH  VW  EM  PX  REM