CSS 15个长度单位使用区别
CSS有很多长度单位,但不是任何一个单位都适合用于任何设计上。本文将介绍CSS的15个长度单位使用区别。
长度是一个数字后跟一个长度单位,例如10px, 2em等。
设置不同的长度值,使用 px(像素):
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}
注意:数字和单位之间不能出现空格。但是,如果值为 0,则可以省略单位。
对于某些 CSS 属性,允许负长度。
长度单位有两种类型:绝对长度和相对长度。
CSS长度单位有两种类型:绝对单位和相对单位
绝对长度
绝对长度单位是固定的,以任何这些单位表示的长度将显示为该大小。
不建议在屏幕上使用绝对长度单位,因为屏幕尺寸变化很大。但是,如果输出介质已知,则可以使用它们,例如用于打印布局。
单位 | 说明 |
---|---|
cm | centimeters(厘米) |
mm | millimeters(毫米) |
in | inches(英寸) (1in = 96px = 2.54cm) |
px * | pixels(像素) (1px = 1/96th of 1in) |
pt | points(点) (1pt = 1/72 of 1in) |
pc | picas(派卡) (1pc = 12 pt) |
* 像素 (px) 与查看设备有关。对于低 dpi 设备,1px 是显示器的一个设备像素(点)。对于打印机和高分辨率屏幕,1px 意味着多个设备像素。
相对长度
相对长度单位指定相对于另一个长度属性的长度。相对长度单位在不同渲染介质之间缩放得更好。
单位 | 说明 |
---|---|
em | 相对于元素的字体大小(2em表示当前字体大小的2倍) |
ex | 相对于当前字体的x高度(很少使用) |
ch | 相对于“0”(零)的宽度 |
rem | 相对于根元素的字体大小 |
vw | 相对于视口宽度 |
vh | 相对于视口高度 |
vmin | 对于视口的较小尺寸 |
vmax | 对于视口的较大尺寸 |
% | 相对于父元素 |
提示:em 和 rem 单位在创建完美可扩展的布局方面非常实用!
视口 = 浏览器窗口大小。如果视口宽 50 厘米,则 1vw = 0.5 厘米。
文章推荐
- CSS单位PX、EM、REM、%、VW 和 VH 有什么区别?