长度单位
1: 像素 px
-像素是我们使用的比较多
一个像素就相当于我们屏幕中的一个小点
我们的屏幕实际上有一个个像素点构成
不同显示器像素的大小是不同的,显示效果越好,像素就越小,反之像素越大
2:百分比 %
-百分比也可以作为单位
浏览器会根据其父元素的样式来计算该值
-使用百分比,优势就是当父元素宽高发生改变的时候,子元素也会随之改遍
-如果你需要创建自适应页面,可以使用百分比
3:em
-em和百分比类似,它是相对于当前元素的字体大小来计算
浏览器默认的字体大小是16px
默认的最小字体是12px
-使用em时,当字体大小发生改变,em也会随之改变
主要用于设置字体相关的样式
4:rem
-rem相对于根元素的字体大小来计算
颜色单位
1:可以直接使用表示颜色的单词
red 红色 green 绿色·····
但实际开发过程中,不推荐使用
不太好记,不好描述
p{
color: red;
}
2:RGB值
-语法:rgb(red, green, blue)
-通过红色,绿色,蓝色,这三种的不同浓度,来表示不同的颜色
-这三色,浓度需要 0-255之间的值,255表示最大,0表示没有
还可以用百分比
0 ==> 0
100% ==> 255
rgb值的数值是给计算机自己识别
-实际开发过程中,用的比较多
p{
color: rgb(255, 0, 0);
}
3:RGBA值
-语法:rgba(red, green, blue, alpha)
alpha 透明度
0-1 0 完全透明 1不透明
p{
color: rgba(255, 0, 0 0.5);
}
4:十六进制 原理是跟rgb一样<