CSS 单位
CSS 有几种不同的单位来表示长度。
许多 CSS 属性都采用“长度”值,例如宽度、边距、填充、字体大小等。
长度是一个数字,后跟一个长度单位,例如 10px、2em 等。
示例
使用 px(像素)设置不同的长度值:
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}
注意:数字和单位之间不能出现空格。但是,如果值为 0,则可以省略单位。
对于某些 CSS 属性,允许使用负长度。
长度单位有两种类型:绝对和相对。
绝对长度
绝对长度单位是固定的,用其中任何一种表示的长度都将显示为该大小。
不建议在屏幕上使用绝对长度单位,因为屏幕尺寸差异很大。但是,如果输出介质已知,例如用于打印布局,则可以使用它们。
单位 | 描述 |
---|---|
cm | 厘米 |
mm | 毫米 |
in | 英寸 (1in = 96px = 2.54cm) |
px * | 像素 (1px = 1in 的 1/96) |
pt . | 点 (1pt = 1in 的 1/72) |
pc | 派卡 (1pc = 12 pt) |
- 像素 (px) 相对于查看设备。对于低 dpi 设备,1px 是显示器的一个设备像素 (点)。对于打印机和高分辨率屏幕,1px 意味着多个设备像素。
相对长度
相对长度单位指定相对于另一个长度属性的长度。相对长度单位在不同的渲染介质之间具有更好的缩放性。
单位 | 描述 |
---|---|
em | 相对于元素的字体大小(2em 表示当前字体大小的 2 倍) |
ex | 相对于当前字体的 x 高度(很少使用) |
ch | 相对于“0”(零)的宽度 |
rem | 相对于根元素的字体大小 |
vw | 相对于视口宽度的 1%* |
vh | 相对于视口高度的 1%* |
vmin | 相对于视口较小尺寸的 1%* |
vmax | 相对于视口较大尺寸的 1%* |
% | 相对于父元素 |
提示:em 和 rem 单位在创建完美可扩展的布局时非常实用! |
- 视口 = 浏览器窗口大小。如果视口宽度为 50 厘米,则 1vw = 0.5 厘米。
总结
本文介绍了的CSS单位使用,如有问题欢迎私信和评论