CSS
z-index（层叠上下文）
CSS2.1时代
当元素发生层叠的时候，其覆盖关系遵循下面2个准则：【张鑫旭】谁大谁上：当具有明显的层叠水平标示的时候，如识别的z-indx值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。通俗讲就是官大的压死官小的。
后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。
盒模型
- 标准模型：width/height = content
- IE模型：width/height = content + border + padding
改变盒模型
- box-sizing：用来改变计算盒子高度/宽度的默认盒子模型
1. 关键字值: box-sizing: content-box; box-sizing: border-box; 2.全局值: box-sizing: inherit; box-sizing: initial; box-sizing: unset;
注意： border-box的诞生，主要就是解决content-box的最大缺点。border-box意味着子容器的padding和border的厚度都算在50%之内，这样，你可以随意的修改padding和border的厚度值，根本不用担心父容器被撑爆。
BFC(块格式化上下文)
- 解决普通文档流块元素的外边距折叠问题
- BFC清除浮动
- 阻止普通文档流元素被浮动元素覆盖
- 自适应两栏布局
如何触发BFC
- 根元素或包含根元素的元素
- 浮动元素（元素的 float 不是 none）
- 绝对定位元素（元素的 position 为 absolute 或 fixed）
- 行内块元素（元素的 display 为 inline-block）
- 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
- 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
- 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
- overflow 值不为 visible 的块元素
- display 值为 flow-root 的元素
- contain 值为 layout、content或 strict 的元素
- 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
- 网格元素（display为 grid 或 inline-grid 元素的直接子元素）
- 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
- column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。
选择器分类
- 类选择器：很多元素可以使用同一个类选择器
- ID选择器：权重很高，一般指向唯一元素
- 属性选择器：指含有[]的选择器
- 伪类选择器：：first-child
- 伪元素选择器： ::before
关系选择器
- 后代选择器： 选择所有符合规则的后代元素，空格连接
- 相邻后代选择器：仅仅选择合乎规则的儿子元素，孙子，重孙子元素忽略，人称“子选择器”，‘>’连接，适用于IE7以上
- 兄弟选择器： 选择当前元素后面的所有合乎规则的兄弟元素，‘~’连接
- 相邻兄弟选择器：仅仅选择当前元素相邻的那个合乎规则的兄弟元素，‘+’连接，适用于IE7以上
选择器优先级
- !important > 行内样式 > #id > .class > tag > * > 继承 > 默认
- 选择器 从右往左 解析