CSS 单位-前端板块造梦空间论坛-技术交流-造梦空间论坛

CSS 单位

文章目录[隐藏]

CSS长度单位有两种类型:绝对单位相对单位

绝对长度

绝对长度单位是固定的,用任何一个绝对长度表示的长度都将恰好显示为这个尺寸。

不建议在屏幕上使用绝对长度单位,因为屏幕尺寸变化很大。但是,如果已知输出介质,则可以使用它们,例如用于打印布局(print layout)。

单位 描述 TIY
cm 厘米 试一试
mm 毫米 试一试
in 英寸 (1in = 96px = 2.54cm) 试一试
px * 像素 (1px = 1/96th of 1in) 试一试
pt 点 (1pt = 1/72 of 1in) 试一试
pc 派卡 (1pc = 12 pt) 试一试

* 像素(px)是相对于观看设备的。对于低 dpi 的设备,1px 是显示器的一个设备像素(点)。对于打印机和高分辨率屏幕,1px 表示多个设备像素。

相对长度

相对长度单位规定相对于另一个长度属性的长度。相对长度单位在不同渲染介质之间缩放表现得更好。

单位 描述 TIY
em 相对于元素的字体大小(font-size)(2em 表示当前字体大小的 2 倍) 试一试
ex 相对于当前字体的 x-height(极少使用) 试一试
ch 相对于 "0"(零)的宽度 试一试
rem 相对于根元素的字体大小(font-size) 试一试
vw 相对于视口*宽度的 1% 试一试
vh 相对于视口*高度的 1% 试一试
vmin 相对于视口*较小尺寸的 1% 试一试
vmax 相对于视口*较大尺寸的 1% 试一试
% 相对于父元素 试一试

提示:em 和 rem 单元可用于创建完美的可扩展布局!

* 视口(Viewport)= 浏览器窗口的尺寸。如果视口宽 50 里面,则 1vw = 0.5cm。

注意:

  1. 数字和单位之间不能出现空格。但是,如果值为 0,则可以省略单位。
  2. 对于某些 CSS 属性,允许使用负的长度。
请登录后发表评论

    没有回复内容

© 造梦空间论坛