颜色

单位

  1. 绝对单位：无论其他相关的设置怎么变化，绝对单位指定的值是不会变化的，常用于打印方面

  2. 相对单位：没有固定的度量值，是由其他元素尺寸来决定的相对值。注意：此处的相对指当前元素的字号（font-size）或者视口（viewport）尺寸。

（1）绝对单位

px：像素 (计算机屏幕上的一个点)，1px = 1/96in
pt：磅 (Points)，1 pt = 1/72 in
pc：12 点活字（Picas），1pc = 12pt = 1/6in
in：英寸（Inches），1in = 96px = 2.54cm
cm：厘米（Centimeters），1cm = 96/2.54px
mm：毫米（Millimeters），1mm = 1/10cm
q：Quarter-millimeters，1q = 1/4mm

（2）相对单位

%：百分比，相对于父元素的宽度或者字体大小
em：相对于当前对象内文本字体的大小，1em = 当前字体的大小，2em = 2 * 当前字体的大小
rem：root em，相对于html标签的字体大小
ex：当前字体环境中x字母的高度，一个 ex 是一个字体的 x-height (x-height 通常是字体尺寸的一半。)ch：当前字体环境中0数字的高度
vw：1%视口（浏览器可视区域）的宽度
vh：1% 视口（浏览器可视区域）的高度
vmin：1% 视口（浏览器可视区域）宽度和高度中较小的尺寸
vmax：1% 视口（浏览器可视区域）宽度和高度中较大的尺寸

（3）单位详解

任意浏览器的默认字体高都是16px所有未经调整的浏览器都符合: 
    100% = 1rem = 1em = 16px = 12pt; => 
    1 / 16 = 0.0625; => 
    10px = 0.625em;手机端常用简化计算：    css的body中声明：font-size: 62.5%;
    1em = 16px * 62.5% = 10px，比如12px = 1.2em;
    开发的时候用：原单位(px) / 10 + 单位(em)；

字体

font-family：有空格字体或中文需要用双引号，其余都可以不加

window和mac显示一样的字体：font-family: "Hiragino Sans GB","Microsoft Yahei",Arial,\5b8b\4f53,"Helvetica Neue",Helvetica,"Heiti SC",sans-serif

命名规范

1、属性缩写，如padding、margin、font、border、background
2、去掉小数点前面的“0”
3、16进制颜色如果三种颜色值每种对应字符想到就缩写
4、所有样式命名英文小写，采用中横线连接
5、JS钩子ID，使用复核单词和下划线连接，首字母大写区分
6、结构化命名，不要直观命名法

书写顺序

显示属性：display, position, float, clear, z-index、overflow
自身属性：width, height, margin, paddig, boder, background
文字样式：font-family, font-size, font-weight, color
文本属性：text-align, vertical-align, whitespace
其他：bacground, opacity, cursor
CSS3：content, box-shadow, border-radius, transform