CSS3继承&选择器权重&像素&百分比&em&rem&RGB值&HSL值&文档流（布局）
文章目录
- 1、继承
- 2、选择器权重
- 3、像素和百分比
- 4、em和rem
- 5、RGB值
- 6、HSL值（不常用）
- 7、文档流
1、继承
/*
样式的继承，为一个元素设置的样式同时也会用到它的后代元素上
继承（方便开发）：
发生在祖先与后代之间，用继承将通用样式设置在祖先元素上（设置一次可让所有元素都具有该元素）
注意：不是所有样式都能被继承
eg：背景、布局相关等都不可以继承
*/
p{
color: aqua;
}
<p>
蓝色
<span>
继承蓝色
span>
p>
2、选择器权重
/*
样式冲突
不同的选择器，选中同一元素，并且为相同的样式设置不同的值
发生样式冲突时，样式由选择器的权重（优先级）决定
选择的权重（由高->低）（就近原则）
内联样式 1,0,0,0
id选择器 0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器 0,0,0,1
通配选择器 0,0,0,0
继承的样式 没有优先级
比较优先级时：将所有的选择器的优先级进行相加（分组选择器单独运算）
选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器
如果优先级相同，则优先使用靠下的样式（下面的覆盖了上面的）
可以在某个样式的后边 ！important,获得最高优先级
开发中，慎用
*/
div#test{ /*优先级相加*/}
div,p,span{/*分组选择器单独运算*/}
3、像素和百分比
/*
长度单位：
像素
屏幕（显示器）由一个一个小点构成
不同屏幕的像素大小不同，像素越小的屏幕效果越清晰
所以同样的200px在不同的设备下显示的效果不一样
百分比
属性值设置为相对于其父元素属性的百分比
子元素跟随父元素的改变而改变
*/
.box1{
width: 200px;
height: 200px;
background-color: aqua;
}
.box2{
width: 50%;
height: 50%;
background-color: black;
}
<body>
<div class="box1">
<div class="box2">div>
div>
body>
展示
4、em和rem
/*
em
相对于元素的字体大小计算
1em=1front-size
em会根据字体的大小变化而变化
rem
相对于根元素（html）的字体大小
*/
.box3{
width: 10em;
height: 10em;
background-color: blue;
}
5、RGB值
/*
颜色单位
在CSS中可以直接使用颜色名来设置各种颜色，但是不方便
RGB值（用吸颜色的工具）
通过三种颜色的不同来配出不同的颜色
每一种颜色的范围在 0-255（0%-100%）之间
语法：RGB（红色,绿色,蓝色）
RGBA
在RGB的基础上，增加了一个A表示不透明度
1不透明，0完全透明，0.5半透明
十六进制的RGB的值
语法：#红色绿色蓝色
颜色浓度 00--ff
如果颜色两位两位重复可以进行简写
*/
.box1{
width: 100px;
height: 100px;
background-color: rgb(255,0,0);/*红色*/
background-color: rgb(0,0,0);/*黑色*/
background-color: rgb(255,255,255);/*白色*/
background-color: rgba(255,0,0,.5);
background-color: #ffff00;
}
6、HSL值（不常用）
/*
HSL值 HSLA值（同上A为透明度）
H 色相（0-360）
S 饱和度
L 亮度
*/
.box1{
width: 100px;
height: 100px;
background-color: hsl(60, 100%, 50%);
}
7、文档流
/*
文档流
网页时一个多层的结构
通过CSS可以分别为每一层设置样式
作为用户只能看到最顶层
最底层称为文档流，文档流是网页的基础
我们所创建的元素默认都是在文档流中
元素的两个状态
在文档流中
脱离文档流中
元素在文档流中的特点
块元素（eg:div）
块元素会在页面中独占一行（自上向下，垂直排列）
默认宽度是父元素全部（撑满父元素）
默认高度是被内容撑开（子元素）
行内元素(eg:span)
行内元素不会独占一行，只占自身的大小
行内元素在页面中自左向右，水平排列
如果一行总不能容下左右的行内元素，则会换到第二行几句自左向右
行内元素的默认宽度和高度都是被内容撑开
*/