CSS的长度单位和颜色单位

目录

一、长度单位

1.像素px

2.百分比%

3.em

4.rem

二、颜色单位

1.不同的英语单词可以设置不同的颜色

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

3.RGBA

4.使用十六进制表示RGB值

5.HSL值  、HSLA值

---

一、长度单位

1.像素px

是屏幕上的一个个小点，正常情况下是看不到的，只有放大到一定的倍数才能看到

物理像素    一开始开发商就设定好了的，在PC端，1px=一个物理像素，这是我们最常用的单位，固定单位

2.百分比%

是相对于其父元素得到宽高进行设置的，是一个相对单位，多用于流体式布局

3.em

相当于当前元素的字体大小，如果没有设置字体大小，那么浏览器有默认的字体大小为16px

如果元素没有设置字体大小，它则会继承其祖先元素得到字体大小

直到继承根标签，根元素的字体大小，根标签/根元素字体默认的大小是16px

4.rem

只相对于根标签根元素改变字体的大小，是一个相对单位

一般用来做移动端的布局

二、颜色单位

1.不同的英语单词可以设置不同的颜色

但这种单位不推荐使用，单词多，不方便使用

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

RGB（red，green，blue）

浓度值为0~255 ，颜色由深到浅

例：box{color：rgb（233，97,64）}

3.RGBA

 a   透明度  0-1 0 完全透明，1 完全不透明

4.使用十六进制表示RGB值

十六进制  0~9abcdef

例：rgb（233,97,64）用十六进制表示 #e96140

常用的十六进制：#ccc灰色，#f00红色，#0f0绿色，#f60棕黄色，#000黑色，#fff白色

5.HSL值  、HSLA值

hsla分别表示亮度，色相，颜色，透明度