选择器不多说，个人觉得选择器权重才是选择器的重点，只要知道浏览器在排查一长串选择器的时候，是从后往前排查的。
eg：div>ul li a em {....} 浏览器看到这一长串，为了节省效率，会从后往前排查，就是从em到div。
关于我怎么不截图：截的图粘贴不过来，886。
一、关于选择器权重
有时候你发现自己的样式没有在你的元素上表现出来，除了检查有没有写错选择器，还可以看看是不是优先级的问题。
1）关于优先级
!important > 行间样式 >id选择器 > class选择器 | 属性选择器 > 标签选择器 > 通配符选择器
2）权重
优先级是根据内部权重进行总结的。
| ！important | 正无穷 |
| 行间样式 | 1000 |
| id | 100 |
| class选择器|属性选择器|伪类选择器 | 10 |
| 标签选择器|伪元素选择器 | 1 |
| 通配符选择器 | 0 |
注意：这些权重的值都不是十进制而是256进制。
eg：.wrapper .top .nav ul li #id { } 权重值是：10+10+10+1+1+100 = 131
如果选出同一个元素的选择器串权重值一样，后面覆盖前面的。
如果.wrapper .top .nav ul li #id 选出来的元素在行间样式写了样式，那么这个选择器串里的样式会不起作用，而不是覆盖，因为行间样式的权重是1000。
二、html元素的分类
元素分为行级元素、块级元素、行级块元素。
1）行级元素（inline）：
特点：行级元素的宽高是由内容撑起的，不可通过css设置宽高来改变宽高，并且具有文本的特点。
常见的行级元素：span、a、strong、em、del
2）块级元素（block）：
特点：独占整行，可以通过css设置宽高
常见的块级元素：div、ul、li、ol、p、form、address
3）行级块元素（inline-block）：
特点：内容决定大小，具有文本的特点，可以设置宽高
常见的行级块元素：img
4）css的display属性值：
你可以通过这个属性改变元素的默认类型。
比如把 行级元素span变成块级元素。
inline-block：设置成行级块元素
block：设置成块级元素
inline：设置成行级元素
三、盒模型与层模型
1）盒模型：
盒子的组成部分：外边距（margin）+盒子壁（border）+内边距（padding）+内容（width + height）
margin和padding属性的值都是顺时针的。
padding：10px 20px 30px 40px （上右下左）
padding：10px 20px（上下、右左）
元素的实际宽高：border+padding+内容
padding在border里面，也就是说，我们的background-color、background-image也会显示到padding上。
body有个天生的margin：8px。这就是为什么经常有人会设置 *{ margin:0 } 的原因之一。
2）层模型：
top、left、bottom、right，z-index是配合定位position的。
z-index 表示层级。
1）absolute 绝对定位：会脱离原来位置进行定位
实质是去了更高的层级，原来层级上的元素看不见它了，就会有俩盒子重叠的现象。
特点：相对于最近有定位的父级进行定位，没有则相对于文档定位。
2）relative 相对定位：相对于自己原来位置进行定位
也不再原来层级，但位置保留，
3）fixed 广告定位：相对于可视区窗口进行定位。
之所以叫广告定位是因为，经常用来做广告的效果。但是fixed的兼容性不好。
四、两个经典BUG
1）margin塌陷
垂直方向上的margin，父子嵌套元素是结合到一起的，取最大的值。
弥补方案：
给父级元素加个border-top、让父级元素触发bfc
注意：没有完美的解决方案，针对需求使用。
2）margin合并
兄弟元素水平方向上的margin是累加的
兄弟元素垂直方向上的margin是合并的
弥补：把两个兄弟元素或者其中一个放进一个父级里，让父级元素触发bfc
还有就是用数学方法弥补
五、block format context 块级格式化上下文
正常情况下，盒子的渲染规则都是一样的，可以通过触发bfc让特定的盒子的渲染规则发生改变，这种改变只有一丁点。
如何触发bfc：
1）position:absolute
2）display:inline-block
3）float:left/right
4）overflow:hidden
来源：https://www.cnblogs.com/hhxxqq/p/9370372.html