AI智能
改变未来

CSS单位

CSS

表示长度的单位有许多,设置

CSS

长度的属性有width、margin、padding、font-size、border-width等,对于一些属性,长度也可以是负数。长度由数字和单位组成,如

2px

.

2em

,

2rem

。一般为长度为0可省略单位。

单位类型及浏览器支持情况

长度单位有两种类型:

  • 相对长度
  • 绝对长度

浏览器支持情况

长度单位 Chrome IE Firefox Safari Opera
em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5
ch 27.0 9.0 1.0 7.0 20.0
rem 4.09.0 3.6 4.1 11.6
vh, vw 20.0 9.0 19.0 6.0 20.0
vmin 20.0 9.0* 19.0 6.0 20.0
vmax 26.0 不支持 19.0 不支持 20.0

相对长度单位

相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。相对长度单位如下表所示:

单位 描述
em 它是描述相对于应用在当前元素的字体尺寸,所以它也是相对长度单位。一般浏览器字体大小默认为16px,则2em == 32px;
ex 依赖于英文字母小 x 的高度
ch 数字 0 的宽度
rem rem 是根 em(root em)的缩写,rem作用于非根元素时,相对于根元素字体大小;rem作用于根元素字体大小时,相对于其出初始字体大小。
vw viewpoint width,视窗宽度,1vw=视窗宽度的1%
vh viewpoint height,视窗高度,1vh=视窗高度的1%
vmin vw和vh中较小的那个。
vmax vw和vh中较大的那个。
%

em和%

em是字体相关的长度单位,在用于font-size属性时,值为相对于父元素字体属性的倍数。在用于其他属性时,相对于本身元素ad8的font-size值计算大小。例如

<div class=\"container\"><p>测试文字</p></div>
.container {font-size:2em; // 2*16=32px}p {font-size:2em;// 2*32 = 64px;width:4em; // 4*64=256px}

%表示基于父元素对应属性计算自身属性值。

rem

rem也是字体相关的长度单位,不同的是rem是相对于根元素html的font-size属性的计算值。

vw/vh

vw/vh是视口单位,同为视口单位的还有vmin、vmax。

vh:viewpoint height,视窗高度,1vh=视窗高度的1%

vw:viewpoint width,视窗宽度,1vw=视窗宽度的1%

视口是什么呢?

在桌面端,指的是浏览器的可视区域,即

window.innerWidth/window.innerHeight

大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小。而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口),具体指Viewport中的Layout Viewport。

绝对长度单位

绝对长度单位是一个固定的值,它反应一个真实的物理尺寸。绝对长度单位视输出介质而定,不依赖于环境(显示器、分辨率、操作系统等)。绝对长度单位如下表所示:

单位 描述
cm 厘米
mm 毫米
in 英寸 (1in = 96px = 2.54cm)
px * 像素 (1px = 1/96th of 1in)
pt point,大约1/72英寸; (1pt = 1/72in)
pc pica,大约6pt,1/6英寸; (1pc = 12 pt)

像素或许被认为是最好的\”设备像素\”,而这种像素长度和你在显示器上看到的文字屏幕像素无关。px实际上是一个按角度度量的单位。

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » CSS单位