卡卡網(wǎng)

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

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

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

h1 {
  font-size: 60px;
}

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

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

對(duì)于某些 CSS 屬性，允許負(fù)長度。

長度單位有兩種類型：絕對(duì)長度和相對(duì)長度。

 
CSS長度單位有兩種類型：絕對(duì)單位和相對(duì)單位

絕對(duì)長度

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

不建議在屏幕上使用絕對(duì)長度單位，因?yàn)槠聊怀叽缱兓艽?。但是，如果輸出介質(zhì)已知，則可以使用它們，例如用于打印布局。

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

相對(duì)長度

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

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

文章推薦

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

標(biāo)簽: css  css3  css單位  VH  VW  EM  PX  REM