重学前端-CSS篇3-颜色、单位、字体、命名规范、书写顺序

颜色

单位

  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
标签: