CSS中的<length>(<number> + 单位)

543 阅读3分钟

<length>

长度<length>是用于表示距离尺寸的CSS数据类型。许多CSS属性用到长度,比如widthmarginpaddingfont-sizeborder-width

语法

数据类型由一个<number>和一个长度单位构成,单位的字面值与数字之间没有空格。
有些属性支持使用复数的长度值,有些不支持。

单位

相对长度单位

相对长度代表着以其他距离为单位的一种尺寸。这个单位可以是指定字符串的大小,行高,或者是viewport的大小

字体相对长度

字体的相对长度指的是根据一个特定字符的大小或当前字符所在元素的父元素所定义的字符大小来定义长度值。

单位描述
cap表示元素字体font的“上限高度”
ch0这一字形的预测尺寸(advace measure),如果无法确定0字形的大小,则必须假定其宽度为0.5em,高位1em
em相对长度单位,这个单位表示元素的font-size的计算值,如果用在font-size属性本身,他则表示元素继承的font-size值。(以父元素为参照)
ex这个单位表示元素font和x-height。在包含x字母的字体中,他是该字体的小写字母的宽度:对于其他字体来说,1ex = 0.5em
ic等于在勇于渲染的字体中找到水字字形使用预先测量
lh等于使用它的元素的line-height属性的计算值,转换为绝对长度。
rem这个单位代表跟元素(通常html元素)的font-size大小,点那个用跟元素的font-size是,它表示它的初始值
rlh等于跟元素行高line-height的计算值

视口(VIEWPOINT)比例长度

视口百分比长度定义相对于viewport的大小值,即文档的课件部分。

单位描述
vh视口初始包含块的高度1%
vw视口初始包含块的宽度1%
vi等于初始包含块的大小的1%,在根元素的行内轴方向上
vb等于初始包含块的大小的1%,在根元素的区块轴方向上
vmin视口高度vh和视口宽度vw两值之间的最小值
vmax视口高度vh和视口宽度vw两值之间的最大值

包含块:通常就是这个元素最近的组件快元素的内容区

绝对长度单位

当输出介质的物理性质已知时,用于绘制布局,绝对长度单位代表一个物理度量单位。这里通过:将一个单元锚定到一个物理单元,并将其定义为相对于另一个,来实现的,对于低分辨率的设备(如屏幕),高分辨率设备(如打印机),该锚定是不同的。
对于低dpi设备,单位px表示物理参考像素,其他单位相对于它定义的,因此,1 in定义为96px,等于72pt。

单位描述
px一像素(pixel)。对于普通的屏幕,通常是一个设备像素(点)。对于打印机和高分辨率屏幕,一个CSS像素往往占多个设备像素,一般来说,每个英寸的像素的数量保持在96左右,1px = 1in / 96
cm一厘米。1cm = 96px / 2.54
mm一毫米。1mm = 1cm / 10
Q四分之一毫米。1Q = 1cm / 40
in一英寸。1in = 2.54cm = 96px
pc12点活字(pica),六分之一英寸。 1pc = 12pt = 1in / 6
pt一点(point),72分之一英寸。 1pt = 1pc / 12 = 1in / 72