CSS长度单位有哪些

CSS中有不少属性是以长度作为值的。盒模型的属性就是一些很明显的值属性:width、height、margin、padding、border。下面给大家介绍一些常用的CSS长度单位,希望对大家有所帮助。

绝对长度单位

px--像素

.wrap {
  width: 400px; 
}

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

像素应该是设备和显示器中显示趋于一致,但是他越来越不正确。比如:在迷你ipad上显示的网站和ipad本身显示的网页是一样的,意味着如果那些设置的像素值标准化后就超出了窗口的范围

在web上,像素仍然是典型的度量单位,很多其他长度单位直接映射成像素,最终,他们被按照像素处理,javascript语言里的单位就是使用的像素。

in--英寸

.wrap {
  width: 4in; 
}

英寸是一个物理度量单位,但是在CSS领域,英寸只不过被直接映射成像素罢了。欢迎大家在评论中提供使用英寸做单位的实例,我会把这些实例添加到这里的,但是,到目前为止我还没有见过哪个实例用的是英寸,当然也没见过使用下面那些物理度量单位的实例。

1in == 96px

cm--厘米

.wrap {
  width: 20cm; 
}

对于世界上大多数的人来说,厘米是比较熟悉有用的物理度量单位。它也映射成像素

1cm == 37.8px

mm--毫米

.wrap {
  width: 200mm; 
}

毫米是个小数量级的物理度量单位。

1mm == 0.1cm == 3.78px

pt--点

.wrap {
font-size: 20pt;
}

点(point),是排版印刷中常用的文字大小单位。它是一种固定长度的度量单位,是能够使用测量设备测得的长度。

1pt=1/72in=1.33px

pc--派卡

.wrap {
font-size: 2pc;
}

派卡(pica)是印刷行业使用的长度单位。

一般来说,派卡用大写字母 P 表示,有时候还在后面加一条斜线(/);而“点”用小写字母 p 表示。在同时使用派卡和点时,在 P/ 的后面写点数,多数场合还会再加上 p 表示是“点”,如 5p 是 5 点,6P/2p 是 6 派卡 2 点=74点、1P/1 是13点。

1pc=12pt=16px。

相对字体的长度

Em

.wrap {
  width: 40em; 
}

Em 是一个相对单位。起初排版度量时是基于当前字体大写字母”M”的尺寸的。当改变font-family时,它的尺寸不会发生改变,但在改变font-size的大小时,它的尺寸就会发生变化。

在没有任何CSS规则的前提下,1em的长度是:

1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm

如果有任何CSS规则改变了字体大小(不管在文档的什么位置),1em的长度会变成相对于新的font-size的大小。

em单位有点古怪,当设置了font-size属性后,它会逐级向上相乘,所以如果一个设置了font-size:1.1em的元素在另一个设置了font-size:1.1em的元素里,而这个元素又在另一个设置了font-size:1.1em的元素里,那么最后计算的结果是1.1X1.1X1.1=1.331rem(根em)。这意味着即使一个元素设置为10em,这个元素也不会在他出现的每个地方都是10em。如果font-size变化了,它可能会宽点,也可能会窄点。

rem

.wrap {
  width: 40rem; 
}

Rem和em一样也是一个相对单位,但是和em不同的是rem总是相对于根元素(如:root{}),而不像em一样使用级联的方式来计算尺寸。这种相对单位使用起来更简单。

值得注意的浏览器支持问题: IE8,, Safari 4或 iOS 3.2中不支持rem单位。

points

.wrap {
  width: 120pt; 
}

Point是一个物理度量单位,1pt=1/72 in.在CSS之外point是最常用的尺寸类型(可能这就是css支持point的原因)。它在语言里也很常见“当然他们把这个重要的信息设置成了小八号字体”。

在打印样式表和物理媒介中,point是最有意义的,当然你也可以用在屏幕媒介上使用,或者其他的地方

值得注意的浏览器支持问题:在屏幕呈现pt尺寸的时候,会有很大的不同,这里有个关于IE6和firefox(可能是3.6版本)的对比。

pica

.wrap {
  width: 12pc; 
}

Pica和points一样,只不过1pc=12pt。

ex

.wrap {
  width: 60ex;
}

ex是一个基于当前字体的x字母高度度量的。ex度量时有时候根据字体自身的信息,有时候由浏览器指明是通过一个小写字形来度量,最糟糕的情况是,它被设置成0.5em。它之所以被命名为“x”的高度,是因为是基于x字母的高度的。要理解x-height,想象一个小写字母,比如“d”,它会有一部分翘起,x-height是不包括翘起的这一部分的,它的高度是那个字母最下面的那一部分。

和em不同,当改变font-family时em不会改变,而ex单位会变化,因为一个单位的值和那个字体是特殊的约束关系。

ch

.wrap {
  width: 60ch;
}

ch的内涵和x高度相似,只是ch是基于字符0的宽度的而不是基于字符x高度的。当font-family改变的时候ch也会随着改变。

值得注意的浏览器支持问题:写这篇文章的时候任何一个webkit内核的浏览器都不支持这个单位。

可视区百分比长度单位

vw

.wrap {
  width: 10vw;
}

vw是可视区宽度单位。1vw等于可视区宽度的百分之一。vw单位跟百分比很相似,不同的是vw的值对所有的元素都一样,与他们父元素或父元素的宽度无关。有点像rem单位那样总是相对于根元素。

这里有一篇文章,里面主要的使用实例就是可视区百分比单位

值得注意的浏览器支持问题:在移动浏览器中除了最新的iOS6支持这种单位外,其他的都不支持,这一点也适用于其他可视区相对长度单位。

vh

.wrap {
  width: 10vh;
}

vh和vw(viewport widht)单位一样,不同的是vh是相对于可视区的高度。

vmin

.wrap {
  width: 20vmin;
}

vmin的值是当前vw和vh中较小的值。在标准尺寸类型的使用实例中,和由自己确定屏幕大小的vw、vh单位相比,vmin是一个更有用的度量标准。

vmax

.wrap {
  width: 20vmax;
}

Vmax的值是vw和vh中的较大的值。

值得注意的浏览器支持问题:webkit内核的浏览器支持vmin,不支持vmax。但是Firefox支持vmax。

离奇的长度单位

百分比

.wrap {
  width: 50%; 
}

以百分比为单位的长度值是基于具有相同属性的父元素的长度值。例如,如果一个元素呈现的宽度是450px,子元素的宽度设为50%,那么子元素呈现的宽度为225px。

杂言:百分比不是一个专门的长度单位,我把它也包括在本文中是因为百分比和长度关系很大。

以上就是CSS长度单位有哪些的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏