层叠规则

首优先——样式表来源

（重要程度递减）

作者样式表（developer所写）
用户样式表（少有）
用户代理样式（浏览器默认样式）

次优先——选择器优先级

id>class=attribute=pseudo-class>type=pseudo-element

注：内联优先级最高。

末优先——源码位置

对于@import的样式，根据@import的顺序。
对于link和style标签的样式，根据其在文档中的顺序决定。

Tips

在CSS中尽量少用id选择器，因为id选择器优先级很高。
尽量不使用!important，特别是在 对外提供的插件 和 全站范围的样式表 中。
自己编写的样式加载在引用库样式后。

CSS样式继承

CSS继承是指被包在内部的标签将拥有外部标签的样式性质。

继承顺序

graph TD
html --> body --> menu --> span
body --> content --> div
content --> ...

继承规则

可使用inherit关键字显示指定一个属性值从其父元素继承。
当继承的样式发生冲突时，按照就近原则和最直接原则。

总结

继承有局限性，某些属性无法继承，如padding, margin, border, background等。
继承中易出错，需要注意。
多种样式混合应用，需要注意优先级和层叠顺序。
标记为!important的样式具有最高优先级。

盒模型

浏览器根据视觉格式化模型，将所有子元素表示为盒模型，CSS通过盒模型来做layout。

屏幕截图 2023-04-27 214155.png

控制盒模型的属性

类型：display:block/inline/inline-block/flex...
大小及计算方式：weight, height, box-sizing:content-box/border-box...
内容流：overflow:auto/scroll/hidden...
定位：position:static/relative/absolute/fixed/sticky...
是否可见：visibility:visible/hidden...

特殊形状实现思路

三角形：利用border-left, border-right, border-bottom属性，transparent。
固定比例矩形：利用padding-bottom属性，设置百分比，即定义该元素宽度为父元素的百分之几；或者使用aspect-radio属性。
水平居中：margin:auto;
渐变边框：利用background-clip, background-origin属性设置只有边框需要填充，用background-image属性设置渐变色linear-gradient()。

注意

padding, border, margin中，只有margin可以设置负值。

常规布局流

盒子的display

外部显示类型（display-outside）：规定盒子如何与同一格式上下文中的其他元素一起显示。

graph TD
块级盒子 --> display:block
块级盒子 --> display:flex
块级盒子 --> display:grid
块级盒子 --> display:table
块级盒子 --> display:flow-root
块级盒子 --> ...
display:block --> 参与块级格式化上下文
display:flex --> 参与块级格式化上下文
display:grid --> 参与块级格式化上下文
display:table --> 参与块级格式化上下文
display:flow-root --> 参与块级格式化上下文
... --> 参与块级格式化上下文

graph TD
内联级盒子 --> display:inline
内联级盒子 --> display:inline-block
内联级盒子 --> display:inline-flex
内联级盒子 --> display:inline-grid
内联级盒子 --> ...
display:inline --> 参与内联级格式化上下文
display:inline-block --> 参与内联级格式化上下文
display:inline-flex --> 参与内联级格式化上下文
display:inline-grid --> 参与内联级格式化上下文
... --> 参与内联级格式化上下文

内部显示类型（display-inside）：规定盒子内部的布局方式。

格式化上下文

在一个块格式区域中，盒子从包含块的顶部开始，按序垂直排列。同级盒子间的垂直距离由margin属性决定。相邻两个块级盒子之间的垂直间距遵循外边距折叠原则被折叠。在一个块格式区域中，若为从左到右排序，每个盒子的左外边缘与包含块左边缘重合。

块级格式化上下文（block formatting context root, BFC），如果盒子具有BFC特性，即无论其外部显示类型是什么，它的内部显示类型都是flow-root，盒子内部形成了一个新的块级格式化上下文。使盒子拥有BFC特性的条件（满足一个即可）：

display:flow-root/inline-block;
position:absolute/fixed;
float:不是none;
overflow:不是visible;

外边距塌陷

会产生外边距塌陷的情况

两个兄弟元素之间相邻的上下外边距
父子元素之间相邻的上下外边距
内容为空元素自己上下边距相邻

消除外边距塌陷的方法

在两个相邻的上下边距之间增加border, padding或内联元素使之不相邻。
在父元素重叠时，可以设置父元素为BFC，使父元素不再同级BFC中。

未完待续......

深入CSS（上） ｜ 青训营笔记