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教程: