HTML CSS 单位

HTML CSS 的单位有几种表示长度的不同单位。
许多 CSS 属性接受“长度”值,诸如 width、margin、padding、font-size 等。
长度是一个后面跟着长度单位的数字,诸如 10px、2em 等。

数字和单位之间不能出现空格。但是,如果值为 0,则可以省略单位。
对于某些 CSS 属性,允许使用负的长度。
长度单位有两种类型:绝对单位和相对单位。

绝对长度

单位描述
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 表示多个设备像素。

相对长度

单位描述
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.5 厘米。

浏览器支持

表格中的数字注明了完全支持该长度单位的首个浏览器版本。

长度单位谷歌浏览器IE浏览器火狐浏览器
em, ex, %, px, cm, mm, in, pt, pc1.03.01.0
ch27.09.01.0
rem4.09.03.6
vh, vw20.09.019.0
vmin20.012.019.0
vmax26.016.019.0

如果你发现错误或有其他见解,请给www.zhuei.com留言,我们会尽快更新本文!

发表评论

邮箱地址不会被公开。 必填项已用*标注