前言
这是影响颜色、距离、大小的一种元素,也是 CSS 工作的基础。
数字
分为整数和小数。
可以是正负值,但具体以属性的范围为准。
百分数
总是基于另一个值,可能是同一元素的另一个属性值、从父元素继承的一个值、祖先元素的一个元素。
具体计算后值的范围,受属性、浏览器等因素限制。
##颜色
命名颜色
只推荐使用 red、black、gray 等简单的颜色名。
受 CSS 规范合法命名的颜色不多影响,在使用时推荐尽量使用下面两种形式。
函数式 GRB
通过组合不同的红色、绿色和蓝色分量来创造颜色。
数值可以是百分数(0%~100%)或整数(0~255):rgb(100%, 100%, 100%)、rgb(255, 255, 255)。
十六进制 GRB
例如:#FFFFFF(等价于 grb(255, 255, 255, 255))
简写记法:#000(等价于 #000000),#F00(等价于 #FF0000)
WEB 安全颜色
在 256 色计算机系统上总能避免抖动的颜色。
三个分量都能被 0% 或 20% 整除
三个分量都能被 0 或 51 整除
三个分量都能被 0 或 33 整除,即使用 00,33,66,99,CC 的三个元组。(十六进制记法)
长度单位
绝对长度
英寸(in)、厘米(cm)、毫米(mm)、点(pt)、派卡(pc)
这些单位会受显示器尺寸和分辨率影响。
ppi 之类的,总之就是在不同尺寸(台式机显示器和笔记本显示器),不同分辨率(不同显卡)上显示的大小不一致。
相对长度
em(em-height)、ex(x-height)、px(像素)
em 的大小会随着父元素字体大小而改变。
ex 是所用字体中小写 x 的高度。(并不是一个好的实现方式,因为不同字体间小写 x 的高度并不是一致的。)
px 像素,受显示器本身像素影响。例如:在高分辨率和低分辨率的显示器上,每英寸内的像素框是不确定的。直接造成高分辨率显示器上字体很小,低分辨率显示器上字体很大的问题。
取舍:在字体大小方面,相对长度会更好些,特别是 em,它会随字体大小进行缩放。其次是 px。
在其他属性方面,px 会更好些。例如:固定的边距、间距等设置一个固定值,要比随着文本大小而变化来的更好些。
URL
绝对 URL,定义了 Web 空间的一个绝对位置。
相对 URL,定义了 Web 空间的一个相对该 URL 所在文档的位置。