一.CSS各尺寸单位

1. PX

​ 语义:

​ px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

​ 特点:

  • IE无法调整那些使用px作为单位的字体大小；
  • 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
  • Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

2. EM

​ 语义:

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

​ 特点:

  • em的值并不是固定的；
  • em会继承父级元素的字体大小。

3. REM

​ 语义:

rem是CSS3新增的一个相对单位（root em，根em）。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。代码如下:

1
div {font-size:14px; font-size:.80rem;}

二. 选择器的优先级

一般来说，选择器的优先级（从上往下依次降低）是：

  1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
  2. 作为style属性写在元素内的样式
  3. id选择器
  4. 类选择器, 伪类选择器
  5. 标签选择器
  6. 通配符选择器

注意:

​ 类选择器和伪类选择器的优先级一样, 谁在后面谁起作用，后面的样式会覆盖前面的样式

三.各样式百分比相对于谁

  1. 相对于父元素宽度的: [max/min-]width、left、right、text-indent、padding、margin 等;

  2. 相对于父元素高度的: [max/min-]height、top、bottom 等;

  3. 相对于主轴长度的: flex-basis 等;

  4. 相对于继承字号的: font-size 等;

  5. 相对于自身字号的: line-height 等;

  6. 相对于自身宽高的:

    border-radius、background-size、border-image-width、transform: translate()、transform-origin、zoom、clip-path 等;

  7. 相对于行高的: vertical-align 等;

四. CSS3新增属性

  1. box-shadow（阴影效果）
  2. border-color（为边框设置多种颜色）
  3. border-image（图片边框）
  4. text-shadow（文本阴影）
  5. text-overflow（文本截断）

  6. word-wrap（自动换行）

  7. border-radius（圆角边框）

  8. opacity（透明度）
  1. box-sizing（控制盒模型的组成模式）
  1. resize（元素缩放）
  1. outline（外边框）
  1. background-size（指定背景图片尺寸）
  1. background-origin（指定背景图片从哪里开始显示）
  2. background-clip（指定背景图片从什么位置开始裁剪）
  1. background（为一个元素指定多个背景）
  2. hsl（通过色调、饱和度、亮度来指定颜色颜色值）
  3. hsla（在hsl的基础上增加透明度设置）
  4. rgba（基于rgb设置颜色，a设置透明度）