1.继承（样式）
- 样式的继承，我们为一个元素设置的样式同时也会应用到他的后代元素上
- 继承是发生在祖先和后代之间的
- 继承的设计是为了方便我们的开发，利用继承我们可以将一些通用的样式统一设置到共同的祖先元素伤，这样只需要设置一次即可
- 注意：并不是所有的方法都会被继承，比如，背景相关的，布局相关等这些样式都不会背继承
2.选择器的权重
- 样式冲突
当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值，此时就发生了样式的冲突
- 发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定
| 类型 |
权重值 |
| 内联样式 |
1000 |
| id选择器 |
100 |
| 类和伪类选择器 |
10 |
| 元素选择器 |
1 |
| 通配选择器* |
0 |
| 继承的样式 |
没有优先级 |
- 比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）
<style>
#box{} 权重：100
div#box1{} 权重：101
.red{} 权重：10
div,p,span{}//不会相加，而是单独的
</style>
- 选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器
- 如果优先级计算后相同，此时则优先使用考下的样式
3.像素和百分比
像素
- 屏幕（显示器）实际上是由一个一个的小点点构成
- 不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
- 所以同样的200px在不同的设备下效果是不一样的
200px;
height: 200px;
百分比
width：50%
height：50%
- 可以将属性设置为相对于其父元素属性的百分比
- 设置百分比可以使子元素跟随父元素的改变而改变
em
- em是相对于元素的字体大小来计算的
- em会根据字体大小的改变而改变
- 1em = 1font-size
.box3{
font-size:30px;
1oem;
height:10em;
background-color:greenyellow;
}
rem
RGB
颜色单位
- 在CSS中可以直接使用颜色名来设置各种颜色
比如：red、orange、yellow、blue、green。。。。
- RGB值
- RGB通过三种颜色的不同浓度来调配出不同的颜色
- R：red、G：green、B：blue
- 每一种元素的范围在0 - 255（0% - 100%）之间
- 语法：RGB（红色，绿色，蓝色）
- RGBA
就是在RGB的基础上增加了一个a表示透明度、
background-color:rgba(106.153,85,1);//表示不透明
background-color:rgba(106.153,85,.5);//表示半透明
background-color:rgba(106.153,85,0);//表示透明
- 十六进制的RGB值
- 语法：#红色绿色蓝色
- 颜色浓度通过 00-ff的16进制表示
- 如果颜色两位重复可以进行简写： #aabbcc===#abc
HSL值（不常用）
- H：色相（0-360），S：饱和度（颜色的浓度0-100%），L：亮度（0-100%）