css 单位

原创
2016/08/19 13:04
阅读数 120

css 尺寸单位

绝对长度

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

px(pixel)像素,绝对单位,px是相对显示器屏幕分辨率而言的,(1px = 1/96th of 1in)。

pt(point)磅,是印刷行业常用单位,(1pt = 1/72in) 等于1/72英寸,它是自然界标准的长度单位,也称为“绝对长度”。

pc(pica),派卡,大约6pt,1/6寸,(1pc = 12 pt)。

in, 英寸,(1in = 96px = 2.54cm)。

cm,厘米。

mm,毫米。

相对长度

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

em是相对单位,它不是一个具体的数值,是基准点为父节点字体的大小,即%,在css中,1em = 100%,它是一个比率,结合css继承关系使用。如果自身定义了font-size按自身来算,默认浏览器字体为16px,整个页面的1em都不一样,因为它会继承父级的字体大小(移动端布局使用比较合适)。在 CSS 中,em 是非常有用的单位,因为它可以自动适应用户所使用的字体。

rem,css3中新增的一个相对单位,相对于根元素(html)字体大小来计算,可谓 root em(浏览器IE9+)。这个单位集绝对单位和相对单位的优点于一身,通过它可以只设置根元素就成比例地调整所有字体大小,又可避免字体大小逐层复合的连锁反应。如果要兼容(IE6-8),同时使用px设置字体就行。

vw(viewpoint width)视窗宽度,1vw等于视窗宽度的1%。

vh(viewpoint height)视窗高度,1vh等于视窗高度1%。

vmin,vw和vh中较小的那个。

vmax,vw和vh较大的那个。

ex,取当前作用效果的字体x的高度(x-height),在不确定x高度的情况下以0.5em计算(IE11及以下不支持),x-height通常是字体尺寸的一半。

ch,通常是数字“0”的宽度,找不到时为0.5em(IE10+)。

%,百分比。

注意!!!

chrome不支持中文字体小于12px,所以会导致当计算小于12px的时候,会默认取12px去计算,导致中文版chrome的rem计算不准确。

使用em时,所有未经调整的的浏览器都符合:1em = 16px, 12px = 0.75em, 10px = 0.625em,为了简化font-size的计算,需要在css中body元素中声明 font-size=62.5%,这就使 em的值为16*0.625 = 10px,这样将你的原来的px数值除以10,然后换上em作为单位,重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

 

css 颜色单位

直接写颜色名,如红色(color:red)。

rgb(x,x,x), RGB 值 (比如 rgb(255,0,0))。rgb(%,%,%), RGB 百分比值 (比如 rgb(100%,0%,0%))。每个参数 (red、green 以及 blue) 定义颜色的强度,可以是介于 0 与 255 之间的整数,或者是百分比值(从 0% 到 100%)。

rgba(ed, green, blue, alpha), alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字。

hsl(hue, saturation, lightness),hsl指的是 hue(色调)、saturation(饱和度)、lightness(亮度) - 表示颜色柱面坐标表示法。Hue 是色盘上的度数(从 0 到 360) - 0 (或 360) 是红色,120 是绿色,240 是蓝色。Saturation 是百分比值;0% 意味着灰色,而 100% 是全彩。Lightness 同样是百分比值;0% 是黑色,100% 是白色。

hsla(hue, saturation, lightness, alpha), hsla颜色值是 hsl 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不透明度。其中的 alpha 参数定义不透明度。alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字。

#rrggbb, 十六进制数 (比如 #ff0000)。

预定义/跨浏览器颜色名, HTML 和 CSS 颜色规范中定义了 147 中颜色名(17 种标准颜色加 130 种其他颜色),查看标准颜色列表

 

css 时间单位

m(秒)。

ms(毫秒)。

 

css 其他单位

PPI(Pixels Per Inch)像素密度,所表示的是每英寸所拥有的像素数量,图像分辨率单位,因此PPI数值越高,即代表显示屏能够以越高的密度显示图像。当然,显示的密度越高,拟真度就越高。

角度单位

rad(Radians)弧度,一个圆有2π弧度。

grad(Gradians)梯度,一个圆有400梯度。

turn(Turns)轮、圈,一个圆共一圈。

deg(Degress)度,一个圆360度。  

注意!!!: 90deg = 100grad = 0.25turn ≈ 1.570796326794897rad。

 

参考资料:

@Jonathan Cutrell  《7 CSS Units You Might Not Know About

W3CHTML CSS单位

css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况

 

版权申明: 本文为原创文章, 转载时请注明:来自w-rain的个人博客

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
在线直播报名
返回顶部
顶部