关于图片格式.长度单位(像素等).颜色单位的笔记(待添加)------知识点整理

关于图片格式.长度单位(像素等).颜色单位的笔记

图片格式

图片格式: 
        jpg 支持颜色丰富,不支持透明 不支持动图
            一般用来显示照片
        gif 支持颜色较少,支持简单透明,支持动图
            颜色单一的图片,动图
        png 支持颜色丰富,支持复杂透明,不支持动图
            颜色丰富,复杂透明图片--专为网页而生
        webp
            谷歌新推出的专门用来表示网页中的一种格式
            具备其他图片格式的所有优点 文件特别小
            兼容性不好
        base64
            图片使用base64编码,将图片转换为字符,通过字符的形式来引入图片
            和网页一起加载出来
            可以再网页搜索base64进行转换

    效果一样,用小的  效果不一样用效果好的

长度单位

长度单位：
                像素
                    - 屏幕（显示器）实际上是由一个一个的小点点构成的
                    - 不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
                    - 所以同样的200px在不同的设备下显示效果不一样

                百分比
                    - 也可以将属性值设置为相对于其父元素属性的百分比
                    - 设置百分比可以使子元素跟随父元素的改变而改变

                em
                    - em是相对于元素的字体大小来计算的
                    - 1em = 1font-size
                    - em会根据字体大小的改变而改变

                rem
                    - rem是相对于根元素的字体大小来计算

简单代码

	html{
        font-size: 30px;
    }

    .box1{
        width:300px;
        height: 100px;
        background-color: orange;
    }

    .box2{
        width: 50%;
        height: 50%;
        background-color:aqua; 
    }

    .box3{
        font-size: 50px;
        /* width: 10em;
        height: 10em; */
        width: 10rem;
        height: 10rem;
        background-color: greenyellow;
    }

颜色单位

颜色单位：
                在CSS中可以直接使用颜色名来设置各种颜色
                    比如：red、orange、yellow、blue、green ... ...
                    但是在css中直接使用颜色名是非常的不方便

                RGB值：
                    - RGB通过三种颜色的不同浓度来调配出不同的颜色
                    - R red，G green ，B blue
                    - 每一种颜色的范围在 0 - 255 (0% - 100%) 之间
                    - 语法：RGB(红色,绿色,蓝色)

                RGBA:
                    - 就是在rgb的基础上增加了一个a表示不透明度
                    - 需要四个值，前三个和rgb一样，第四个表示不透明度
                        1表示完全不透明   0表示完全透明  .5半透明

                十六进制的RGB值：
                    - 语法：#红色绿色蓝色
                    - 颜色浓度通过 00-ff
                    - 如果颜色两位两位重复可以进行简写  
                        #aabbcc --> #abc
                
                HSL值 HSLA值
                    H 色相(0 - 360)
                    S 饱和度，颜色的浓度 0% - 100%
                    L 亮度，颜色的亮度 0% - 100%