这是我参与「第四届青训营 」笔记创作活动的的第2天
1、选择器的权重
样式冲突：当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突
发生样式冲突时，应用哪个样式由选择器的优先级决定
选择器权重：
-
内联样式 1000
-
id选择器 100
-
类和伪类选择器 10
-
元素选择器 1
-
通配选择器 0
-
继承的样式 没有优先级
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示
注：分组选择器是单独计算的 选择器的累加不会超过其最大的数量级 类选择器再高也不会超过id选择器
如果优先级计算后相同，此时则优先使用靠下的样式
---可以在某个样式后面添加 ！important 则此时该样式会获取到最高的优先级，甚至超过内联样式 --
注意：开发中，这个玩意慎用
div{ background-color:red !important; }
2、长度单位
-
像素
屏幕实际上是由一个一个的小点构成的
不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
所以同样的200px在不同的设备下显示的效果不一样
-
百分比
也可以将属性值设置为相对于其父元素属性的百分比
设置百分比可以使子元素随父元素的改变而改变
-
em
em是相对于元素的字体大小来计算的
1em = 1font-size
em会根据字体大小的改变而改变
-
rem
rem是相对于根元素的字体大小来计算（html）
3、颜色单位
-
使用颜色名设置颜色 不方便且不好描述
-
rgb值表示颜色
rgb通过三种颜色的不同浓度来调出不同的颜色
Red-Green-Blue 光的三原色范围： 0-255 rgb（0，0，0）黑色 rgb（255，255，255）白色
-
rgba a表示透明度 0（透明）～1（不透明）
-
十六进制rgb值：
语法#rgb
如果颜色两位两位重复 可以简写
#aabbcc ==> #abc #ffff00 ==> #ff0
4、HSL值、HSLA值
- H 色相 取值范围0-360 圆环取色盘
- S 饱和度 颜色浓度 取值范围0%-100%
- L 亮度 颜色的亮度 取值范围 0%-100% （0是黑色）
5、文档流 normal flow
-
网页是一个多层结构 一层摞着一层 通过css可以分别为每一层来设置样式
作为用户只能看到顶层
这些层中，最底下一层称为文档流 文档流是网页的基础
我们所创建的元素默认都是在文档里中进行排列
对于我们来说，元素只有两个状态
（1）在文档流中
（2）不在文档流中（脱离文档流）
我们主要考虑文档流元素，元素在文档流中有什么特点
--块元素
块元素在页面中独占一行 自上而下垂直排列
默认宽度是父元素的全部 会把父元素撑满
默认高度是被内容撑开（子元素）
--行内元素
行内元素不会独占一行，只占自身的大小
行内元素在页面中从左向右水平排列
如果一行中不能容纳所有的行内元素 则元素会换到第二行继续自左向右排列
行内元素的默认宽高都是被内容撑开
