HTML,CSS进阶知识（字体样式颜色，行间距等）

长度单位

    1:像素 px

          就是电脑屏幕上的一个个发光的小点，我们眼睛是看不出来,

            像素是我们pc端最常用的一个单位，它是一个固定单位

     2:百分比 %  

          是父元素的宽高的百分比，是一个相对单位，会随着父元素宽高的变化而变化

            一般情况下，做流式布局比较多

        3、em

         也是一个相对单位，相对于当前元素的字体大小来计算最终大小，

         也就是1em=1个font-size。如果当前的元素没有设置字体大小，

         那么会继承祖先元素的字体大小，

         最终继承到html默认的字体大小，是16px

        4、rem  

        r  root  根

        也是一个相对单位，相对于根标签html的字体大小来计算最终大小

        也就是1rem=1个html的font-size

        5、vw、vh

<style>
      html{
        font-size: 20px;
      }
      section {
        width: 300px;
        height: 300px;
        background-color: pink;
      }
      div {
        width: 10rem;
        height: 10rem;
        background-color: red;
      }
    </style>

颜色单位

1:在CSS可以直接使用颜色的单词来表示不同的颜色

    red、green、yellow、blank等

    缺点：颜色单词太多了，不好描述

 2:使用RGB值来表示不同的颜色

  rgb(红色，绿色，蓝色)

     颜色的值 0-255之间   0最小，255最大

    直接用电脑或插件可以吸取颜色的比值，ctrl+alt+a

3:RGBA

  rgba(red, green, blue, alpha)

  alpha 透明度  0-1之间设置透明度   0是透明，1是不透明

 4:使用十六进制的rgb值来表示颜色，原理和上边RGB原理一样

   十六进制：0-9abcdef，  

      00表示最小，代替0-255的0，ff表示最大，代替0-255的255              

    用十六进制的值来表示0-255之间的数值，表示红色，绿色，蓝色的浓度

    语法：#ff0000，像这样两两重复的表示，可以省略一位，简写成#f00

         #f0f0f0  这样的是不可以省略

    例子：#f00  #0f0  #00f  #ccc  #eee  #333  

<style>
    .box1{
      width: 100px;
      height: 100px;
      background-color: rgba(18