在CSS中，值的类型有很多种，一些很常见，一些你却几乎没怎么遇到过。我们不会在这篇文档中面面俱到地描述他们，而只是这些对于掌握CSS可能最有用处的这些。本文将会涉及如下CSS的值：
-
数值: 长度值，用于指定例如元素宽度、边框（border）宽度或字体大小。
-
百分比: 可以用于指定尺寸或长度——例如取决于父容器的长度或高度，或默认的字体大小。
-
颜色: 用于指定背景颜色，字体颜色等。
-
坐标位置: 例如，以屏幕的左上角为坐标原点定位元素的位置。
-
函数: 例如，用于指定背景图片或背景图片渐变。
数值
绝对单位
-
px：像素
一般来说，不会使用px以外的其他单位。
相对单位
相对于当前元素的字号（ font-size ）或者视口(viewport)尺寸
-
em:1em与当前元素的字体大小相同（更具体地说，一个大写字母M的宽度）。CSS样式被应用之前，浏览器给网页设置的默认基础字体大小是16像素，这意味着对一个元素来说1em的计算值默认为16像素。但是要小心—em单位是会继承父元素的字体大小，所以如果在父元素上设置了不同的字体大小，em的像素值就会变得复杂。现在不要过于担心这个问题，我们将在后面的文章和模块中更详细地介绍继承和字体大小设置。em是Web开发中最常用的相对单位。 -
rem: REM（root em）和em以同样的方式工作，但它总是等于默认基础字体大小的尺寸；继承的字体大小将不起作用，所以这听起来像一个比em更好的选择，虽然在旧版本的IE上不被支持。 -
vw,vh: 分别是视口宽度的1/100和视口高度的1/100，其次，它不像rem那样被广泛支持。
em、rem现在常被用作移动端网页的开发制作。
同时，有些属性中使用负值（例如：margin:-100%;）完成一些布局效果
百分比
使用百分比值指定可以通过特定数值指定的大部分内容。 使用em或者百分比可以完成流动布局和固定宽布局。
颜色
CSS中指定颜色的方法主要通过十六进制值、RGB、HSL，其中RGB和HSL都有相应的模式——RGBA和HSLA——不仅允许您设置想要显示的颜色，还有此颜色的透明度（a即为alpha通道。0是完全透明，1是完全不透明）。此外，此前已有的opacity属性，可以在动画中展现不同效果。
函数
一些函数作为属性值存在于CSS中。
例举些比较有趣的函数：
calc()：四则运算来决定一个CSS属性的值。针对盒模型，它可以不用通过改变box-sizing，而是通过计算，来实现content-box和border-box在外貌上的相似。也可以简单的设置一些边距，例如：width: calc(100% - 80px);
参考：MDN:CSS的值和单位
网友评论