选择器类型
id 选择器、class 选择器、属性选择器、*、伪类选择器、伪元素、后代选择器、子类选择器、兄弟选择器
权重计算规则
第一优先级：!important 会覆盖页面内任何位置的元素样式
1.内联样式，如 style=”color: green”，权值为 1000
2.ID 选择器，如#app，权值为 0100
3.类、伪类、属性选择器，如.foo, :first-child, div[class=”foo”]，权值为 0010
4.标签、伪元素选择器，如 div::first-line，权值为 0001
5.通配符、子类选择器、兄弟选择器，如*, >, +，权值为 0000
6.继承的样式没有权值
| !important > 行内样式 > ID 选择器 > (类选择器 | 属性选择器 | 伪类选择器) > 元素选择器 |
注意权重的计算不能越级，比如：无论多少个 class 组成的选择器，都没有一个 ID 选择器权重高。 很早前的浏览器积累到一定数量是行的
定位
| 属性 | 说明 |
|---|---|
| absolute | 生成绝对定位的元素，相对于 static 定位以外的一个父元素进行定位。元素的位置通过 left、top、right、bottom 属性进行规定。 |
| relative | 生成相对定位的元素，相对于其原来的位置进行定位。元素的位置通过 left、top、right、bottom 属性进行规定。 |
| fixed | 生成绝对定位的元素，指定元素相对于屏幕视⼝（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变，⽐如回到顶部的按钮⼀般都是⽤此定位⽅式。 |
| static | 默认值，没有定位，元素出现在正常的文档流中，会忽略 top, bottom, left, right 或者 z-index 声明，块级元素从上往下纵向排布，⾏级元素从左向右排列。 |
| inherit | 规定从父元素继承 position 属性的值 |
| sticky | 定位类似于相对定位，（当它表现为 fixed 定位的特性时）会根据最近的滚动容器（nearest scrollport）自动计算偏移量。 |
sticky
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
设定为 position: sticky 的元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效；
在满足上述情况下，设定了 position: sticky 的元素的父容器的高度必须大于当前元素，否则也会失效。（当然，此时，sticky 吸附的基准元素就会变成父元素）
BFC
通俗来讲：BFC 是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。如果一个元素符合触发 BFC 的条件，则 BFC 中的元素布局不受外部影响。
创建 BFC 的条件：
● 根元素：body；
● 元素设置浮动：float 除 none 以外的值；
● 元素设置绝对定位：position (absolute、fixed)；
● display 值为：inline-block、table-cell、table-caption、flex 等；
● overflow 值为：hidden、auto、scroll；
BFC 的特点：
● 垂直方向上，自上而下排列，和文档流的排列方式一致。
● 在 BFC 中上下相邻的两个容器的 margin 会重叠
● 计算 BFC 的高度时，需要计算浮动元素的高度
● BFC 区域不会与浮动的容器发生重叠
● BFC 是独立的容器，容器内部元素不会影响外部元素
● 每个元素的左 margin 值和容器的左 border 相接触
BFC 的作用：
● 解决 margin 的重叠问题：由于 BFC 是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个 BFC，就解决了 margin 重叠的问题。
● 解决高度塌陷的问题：在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为 0。解决这个问题，只需要把父元素变成一个 BFC。常用的办法是给父元素设置 overflow:hidden。
● 创建自适应两栏布局
隐藏元素的方式
| 隐藏方式 | 是否占据空间 | 是否响应鼠标事件 | 是否响应键盘事件 | 对读屏器的影响 |
|---|---|---|---|---|
display: none; |
否 | 否 | 否 | 不可见 |
visibility: hidden; |
是 | 否 | 是 | 不可见 |
opacity: 0; |
是 | 是 | 是 | 可见 |
position: absolute; + left: -9999px; |
是 | 否 | 是 | 可见 |
clip: rect(0, 0, 0, 0); |
是 | 否 | 是 | 可见 |
clip-path: inset(100%); |
是 | 否 | 是 | 可见 |
height: 0; + overflow: hidden; |
是 | 否 | 是 | 可见 |
transform: scale(0, 0); |
是 | 否 | 是 | 可见 |
aria-hidden="true" |
是 | 是 | 是 | 不可见 |
