CSS单位

>CSS单位
尺寸

px(pixel)：像素
像素：是指由图像的小方格组成的，这些小方块都有一个明确的位置和被分配的色彩数值，小方格颜色和位置就决定该图像所呈现出来的样子。可以将像素视为整个图像中不可分割的单位或者是元素。
分辨率(解析度)：单位英寸(2.54厘米)中所包含的像素点数。像素是分辨率的单位。
640x480显示器：表示横向640像素和纵向480像素。总数为640 × 480 = 307,200像素。
计算机编程中，像素组成的图像叫位图或者光栅图像。光栅一词源于模拟电视技术，位图化图像可用于编码数字影像和某些类型的计算机生成艺术。
原始解析度为1280×1024的显示器在解析度为1280×1024时看起来最好，也可以通过用几个物理三元素组来表示一个像素以显示800×600，但可能无法完全显示1600×1200的解析度，因为物理三元素组不够。 像素可以是长方形的或者方形的。有一个数称为长宽比，用于表述像素有多方。
每像素：一个像素所能表达的不同颜色数取决于比特每像素(BPP)。

em单位在排版中有它的起源。em是作为给定类型字体大小的相对大小。
空铅中的字母具有相同的高度，不同的宽度。字母M在宽度和高度上最为接近。所以约定俗成的将"M"的宽度作为相对单位建立。
因此em单位名的起源只是因为这个是字母"M"的语音表达(ɛm)(我找不到对这个起源的任何历史证明，但是人们似乎认为这是最合理的解释)。著作权归作者所有。
相对单位em和ex是相对于元素本身的字体大小的。
em缺点：它是继承的。如果多个嵌套元素中重写了em的字体大小。想要计算DOM深层的节点的字体大小的时候，较为麻烦。

html {
    font-size: 20px; 
} 
.level-1, .level-2 {
    font-size: 0.5em; 
} 
.level-3 {
    font-size: 2em; 
}
<div class="level-1"> 
    <div class="level-2"> 
        <div class="level-3"> 
            <p>Hello!</p> 
        </div> 
    </div> 
</div> 

本例中：文本的字体大小是10px,因为html元素最初的20px在乘以2之前乘了两次0.5。

REM表示“Root EM”，字面上指的是根元素的em大小。在Web文档的上下文中，根元素就是你的html元素。
因此是以html标签的字体大小作为基准。

颜色