css长度单位-CSS 宽度单位和颜色设置

1.CSS宽度单位

CSS支持多种宽度单位，分为绝对厚度单位和相对厚度单位。

绝对单位包括英寸、厘米、点等css长度单位，相对厚度单位包括比率等。

单位描述示例

嗯

相对于自身的font-size（字体大小）属性的值，如果不设置css长度单位，则会继承父元素的font-size属性的值，1em相当于font-size的值属性。

p{行高：2em;}

雷姆

相对于根元素的font-size属性的大小，例如根元素的font-size是10px，那么1.2rem就相当于12px。

p{字体大小：1.2rem;}

前任

相对于所用字体中小写汉字x的高度，如果无法确定x的高度，则使用0.5em来估算。

p{字体大小：1ex;}

ch

如果无法相对于所用字体中数字零的高度确定零的高度，则使用 0.5em 的估计值。

p{行高:3ch}

大众汽车

相对于浏览器窗口的长度，1vw=窗口长度的1%。

p{字体大小：5vw;}

维赫

相对于浏览器窗口的高度，1vh=窗口高度的1%。

p{字体大小：5vh;}

最小电压

vw 和 vh 中较小的一个。

p{字体大小：5vmin;}

最大速度

vw 和 vh 中较大的一个。

p{字体大小：5vmax;}

相对于父元素间距或字体大小的比率。

div{宽度:55%}

举一个简单的例子：

    
        
        
            .box{
                width: 50vw;
                height: 80vh;
                border: 1ex solid black;
                font-size: 16px;
            }
            .info{
                font-size: 1em;
            }
            .ex > span{
                font-size: 2ex;
            }
            .ch > span{
                font-size: 3ch;
            }
        
     
    
        

            学习
            
学习
            

                x：学习
            
            

                0：这是 4学习
            
        
  
    

运行结果如下：

二、CSS颜色设置

我们在显示器上看到的是颜色是由红、绿、蓝三基色组成的。 通过将这三种颜色以不同的比例混合，我们可以得到其他颜色。 通过调整红、绿、蓝三种颜色的数值，可以最大限度地控制颜色。

香洽

描述示例

颜色名称

使用颜色名称设置具体颜色，如红色、蓝色、棕色、浅海绿色等。颜色名称不区分大小写

颜色: 蓝色;

十六进制补码

使用十六进制代码设置具体颜色，形式为#RRGGBB或#RGB（如#ff0000），“#”后跟6或3个十六进制字符（0-9、AF）

颜色：#f03；

RGB

通过rgb()函数控制红、绿、蓝三基色的硬度，从而实现不同的颜色

颜色:rgb(255,0,51);

RGBA

RGBA对RGB进行了扩展，在RGB的基础上减少了alpha通道来设置颜色的透明度，需要使用rgba()函数来实现

颜色:rgba(255,0,0,0.1);

HSL

通过hsl()函数调整颜色的色相、饱和度、亮度，实现不同的颜色

颜色:hsl(120,100%,25%);

高斯拉

HSLA扩展了HSL，在HSL的基础上减少了alpha通道来设置颜色的透明度，需要使用hsla()函数来实现

颜色：hsla(240,100%,50%,0.5);

详情如下：