css 单位

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的我的博客