css基础知识
css又叫层叠样式表（cascading style sheets），可见css是一个样式表，样式表又叫规则声明的集合，常常会产生冲突，为了解决冲突，就引入了层叠的概念。
那么层叠是如何解决样式表的冲突的呢？
层叠，它作为一种规则，用于决定当多个CSS规则的属性值冲突时，哪个规则将会被应用到元素上。具体来说，当多个规则定义了相同的属性，而且这些规则都适用于同一个元素时，就会发生层叠。
下图表示层叠的优先级排序。
- css的盒模型
以下是几个盒模型相关的代码展示
针对与margin属性值可为负数的特点，讲师是不推荐在项目中大量使用，因为大量使用将不利于后续的维护，并且降低可读性。
margin的负值最终减少的是外界可感知的宽高
布局与定位
在css 3 之前，我们常用的布局分为三类：Normal Flow（常规流）、Float（浮动流）、Positioning（定位流）。
我们通常使用浮动和定位来脱离文档流，也就是布局中的常规流。
通常使用float属性进行横向布局，使用position属性的fixed和absolute进行自由定位、覆盖等。
在css 3 之后，新增了一下几种布局:
常规流布局
常规布局流分为块级格式化上下文（BFC）和内联格式化上下文（IFC)
巧妙利用BFC解决外边距塌陷问题：
内联格式化上下文相关case：
定位Position
position 属性规定应用于元素的定位方法的类型。
有五个不同的位置值：
- static
- relative
- fixed
- absolute
- sticky
元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。
position的属性值默认为static
层叠上下文
上面提到position，那么就可以引出z-index属性了。
Z-index 仅能在定位元素上奏效（例如 position:absolute;）！
Z-index可为负。
