像素，百分比，em,rem,颜色单位的相关讲解。

像素和百分比。

（一）像素

• 首先你电脑的屏幕（显示屏）实际上是一个一个的小点点，也就是由一个一个像素构成，不同屏幕的像素大小是不同的，并且像素越小就越清晰
• 也就是说，同样的200像素在不同的设备上显示的效果不同。
• 例如：

                    同一张照片在你的电脑上二百个像素，而在有些手机上可能是八百个像素，也就是说                      手机上四个像素替换电脑上的一个像素，这样的照片就清晰很多。

（二）百分比

• 可以将设置的属性改变成相对于父元素的百分比

     例如：

这样就会出现以下场景

​

  这样写有一个好处：给子元素用这种百分比的写法，就会使子元素随父元素的改变而改变。

---

em与rem

（一）em

• 如果你用em为单位，那么1em=16px

        这是可以设置的

        1em=1font-size

例如你可以这样写：

这样显示出来的背景就是长宽为1000px

（二）rem

• 这是相对于根元素的，就是你需要设置html的font-size

 例如：

同样的1rem=1font-size

---

颜色单位

• 在css中可直接使用颜色名设置：red，yellow，blue等等，但这样就会有一个弊端，一个是你把颜色很难记完，另一个就是有些颜色你根本无法表述。

在这里就要说到一个

（一）rgb值

• 这是通过三种颜色的浓度来调的：故名思意，red，green，blue。

          每种颜色的调节浓度都是0到255之间，举个例子

这就是红色，其实就是光的三原色，三者都为零，就是黑色，三者都255就是白色。

（二）rgba

• 相比于rgb多了个a就是透明度，为1时显示为完全不透明，0时为完全透明。