CSS单位

2023-10-10 48

CSS 中,我们可以使用各种单位来精确地控制元素的尺寸、位置和布局。许多 CSS 属性接受“长度”值,诸如 width、margin、padding、font-size 等。CSS 有几种表示长度的不同单位。,其中包括绝对单位和相对单位。长度是一个后面跟着长度单位的数字,诸如 10px、2em 等。

实例:

使用 px(像素)设置不同的长度值:

h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}

注意:

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

长度单位有两种类型:

  • 绝对单位;
  • 相对单位。

一、绝对长度

绝对长度单位是固定的,用任何一个绝对长度表示的长度都将恰好显示为这个尺寸。不过不建议在屏幕上使用绝对长度单位,因为屏幕尺寸变化很大。但是,如果已知输出介质,则可以使用它们,例如用于打印布局(print layout)。

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

三、浏览器支持

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

CSS单位

  • 广告合作

  • QQ群号:707632017

温馨提示:
1、本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。邮箱:2942802716#qq.com(#改为@)。 2、本站原创内容未经允许不得转裁,转载请注明出处“站长百科”和原文地址。
CSS单位
上一篇: CSS计数器
CSS单位
下一篇: PHP运算符优先级