CSS 中有不少属性是以长度作为值的. 盒模型的属性就是一些很明显的值属性: width,height,margin,padding,border. 下面给大家介绍一些常用的 CSS 长度单位, 希望对大家有所帮助.
绝对长度单位
px-- 像素
- .wrap {
- width: 400px;
- }
像素或许被认为是最好的 "设备像素", 而这种像素长度和你在显示器上看到的文字屏幕像素无关. px 实际上是一个按角度度量的单位 http://inamidst.com/stuff/notes/csspx .
像素应该是设备和显示器中显示趋于一致, 但是他越来越不正确. 比如: 在迷你 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 是一个相对单位. 起初排版度量 http://en.wikipedia.org/wiki/Em_(typography) 时是基于当前字体大写字母 "M" 的尺寸的. 当改变 font-family 时, 它的尺寸不会发生改变, 但在改变 font-size 的大小时, 它的尺寸就会发生变化.
在没有任何 CSS 规则的前提下, 1em 的长度 http://codepen.io/chriscoyier/pen/vnhup 是:
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 单位那样总是相对于根元素.
这里有一篇文章, 里面主要的使用实例就是可视区百分比单位 http://css-tricks.com/viewport-sized-typography .
值得注意的浏览器支持问题: 在移动浏览器中除了最新的 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.
杂言: 百分比不是一个专门的长度单位, 我把它也包括在本文中是因为百分比和长度关系很大.
来源: http://www.css88.com/qa/css3/11465.html