其实这章带给我最大的冲击是css in js，因为之前写css想className确实也是一个很苦恼的事情，很多时候发现真的不行了哈哈哈哈哈，只能用拼音（笑死
层叠
说实话，今天学习之前对层叠的概念很模糊，今天算是清晰了
层叠三大规则
优先程度：
样式表来源>选择器优先级>源码位置
样式表来源重要排序
用户代理样式(浏览器默认样式) < 用户样式表（很少有）< 作者样式表（developer写的）< 作者样式表中的!important < 用户样式表中的!important < 用户代理样式表中的!important
选择器优先级
内联(o) > id(a) > class(b) = attribute(b) = pseudo-class(b) > type(c) = pseduo-element(c)
标记(a,b,c)
内联样式不属于选择器，为了方便记忆，放在这里做对比
:is(),:not(),:has()本身不计入优先级，以参数中最高的优先级为准，:where()优先级为0
源码顺序
- 对于@import的样式，根据import顺序
- 对于link和style标签的样式，根据在documen中的顺序决定
- 选择器尽量少用id
- 尽量不要用!imoportant
- 自己的样式加载在引用库样式的后面
继承
大部分具有继承特性的属性和文本相关
可以用inherit关键字显示指定一个属性值从其父元素继承
盒模型
实现一个三角形
利用border实现 要不同的方向直接改对应的border-position就行
实现固定比例矩形
利用padding基于宽度的百分比去计算 或者使用新特性aspect-ratio
实现水平居中
实现渐变边框
利用background-clip,background-origin,gradient
负外边距
padding,border,margin中只有margin可以设置负值，设置左/上会相应地向左/上移动，而设置右/下则会把下一个元素拉过来
不建议使用，最多局部用用，实在不行再用
常规流布局
block和inline
BFC，表示的是元素内部形成了一个新的块级格式上下文
弹性盒子
之前有写了一篇关于flexbox的文章，大家有兴趣可以去看看，里面还有一个练习的链接
grid
定位
外边距塌陷
会产生外边距塌陷的情况：
- 两个兄弟元素之间的相邻上下外边距
- 父子元素之间相邻的上下外边距
- 内容为空元素自己上下外边距相邻
消除外边距塌陷
- 在两个相邻的上下边距之间增加border,padding或者内联元素使之不相邻
- 在父子元素重叠时，除了上述方法，还可以设置父元素为BFC，使得父子不在同级BFC中
内联级格式上下文
元素垂直居中：line-height
文字和icon垂直居中
设置父元素font-size:0;基线和中线重合，然后子元素设置vertical-align:center;
