CSS 具有两个核心的概念——继承和层叠。
|
|
层叠是CSS的一个基本特征，它是一个定义了如何合并来自多个源的属性值的算法。
我们平时看到的电脑屏幕是“二维”的平面，但事实上CSS世界的概念是“三维”的，通过它的层叠规则可以构建出视觉上的三维效果。通俗一点理解，层叠就是为了在二维界面模拟出三维视觉效果设置的规则。
| 层叠上下文 |
层叠上下文(stacking context)就是对 HTML 元素的一个三维构想，众 HTML 元素基于其元素属性按照优先级顺序占据这个空间。哪些元素显示在前面，哪些元素在后面。
z-index是一个能够使HTML元素形成一个层叠上下文的特殊属性。z-index值不同，则会在z轴上刻画出多一个二维平面，z-index值越大，位面就越高，离我们视觉越近。
注意：z-index属性并非单独起作用的，要与定位属性配合作用才能起效，后文有介绍。
| 构建层叠上下文 |
满足以下任意一个条件的元素即可形成：
- 文档根元素（
<html>）； - position 值为 absolute（绝对定位）或 relative（相对定位）且 z-index 值不为 auto 的元素；
- position 值为 fixed（固定定位）或 sticky（粘滞定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）；
- flex (flexbox) 容器的子元素，且 z-index 值不为 auto；（父元素的display属性值为flex|inline-flex，子元素z-index属性值不为auto的时候）
- grid 容器的子元素，且 z-index 值不为 auto；
- opacity 属性值小于 1 的元素
- 以下任意属性值不为 none 的元素：transform、filter、perspective、clip-path、mask / mask-image / mask-border
- will-change 值设定了任一属性而该属性在为非初始化 (non-initial) 值
MDN文档：层叠上下文有更详细介绍。
| 没有创建自己的层叠上下文的元素会被父层叠上下文同化 |
- 层叠上下文可以包含在其他层叠上下文中，并且一起创建一个层叠上下文的层级
- 每个层叠上下文都完全独立于它的兄弟元素：当处理层叠时只考虑子元素。
- 每个层叠上下文都是自包含的：当一个元素的内容发生层叠后，该元素将被作为整体在父级层叠上下文中按顺序进行层叠。
- 层叠等级的比较只有在当前层叠上下文元素中才有意义。不同层叠上下文中比较层叠等级是没有意义的。
打个比方，层叠上下文就是一个位面，一开始大家都是同处在一个下位面（根层叠上下文），一个位面上有大大小小许多国家（html元素），在满足某些条件后（具有层叠上下文属性），一些国家移居脱离了下位面，移居至不同高度的上位面（z轴视觉），跟原本相邻的国家没有了干系（每个层叠上下文都完全独立于它的兄弟元素）。然而飞升国度国内亦不太平，国内高手如云，纷争竞位，人们就被分成上层、中层、下层阶级，各个阶级内部自然又有上中下之流（创建新的层叠上下文），但任何人都无法脱离国家而活（归属一个始创层叠上下文），也就是说位面内有比较，位面外也有比较，如果位面不同，甭管你在位面内位置有多上流，也比上位面混的最差的那个还差。
- Root
- DIV #1
- DIV #2
- DIV #3
- DIV #4
- DIV #5
- DIV #6
| 层叠顺序 |
虽然知道如何构建层叠上下文了，但是在一个层叠上下文内谁的优先级更高呢？
可以看到，在每一个层叠上下文的结界中，任何内部元素的层级都要高于backgroud/border，因此background/border组成了层叠上下文的“地板”，而层叠上下文的“天花板”取决于内部元素的z-index:正值的大小（理论上是这样）。
| 覆盖关系遵循下面两条准则 |
（1）谁大谁上：当具有明显的层叠水平标识的时候，如生效的z-index属性值，在同一个层叠上下文中，层叠z-index值大的那一个覆盖小的那一个。
（2）后来居上：当元素层叠水平一致的时候，在同一空间内文档流中处于后面的元素会覆盖前面的元素。
有人又会问，如果某元素的某个属性设置了多个选择器中都设置了该属性的值，最终选取哪个的值？这就涉及权重优先级的计算了！
|
|
CSS 属性的继承分为默认继承的和默认不继承的，但所有属性都可以通过设置 inherit 实现继承。
当属性没有指定值时，默认继承的属性取父元素的同属性的计算值（computed value），默认不继承的属性取属性的初始值。
初始值是指当属性没有指定值时的默认值，如这些语句的值都是默认值：background-color: transparent; left: auto 、float: none; width: auto 等。
<span style="color: red">
inherited properties <em>CSS</em>
</span>
<span style="border: 1px solid black">
non-inherited properties <em>CSS</em>
</span>
第一个<span>中的<em>继承了<span>的color属性，第二个<span>中的<em>没有继承<span>的border属性。
| 默认继承属性（inherited properties） |
- 所有元素默认继承：visibility、cursor
- 文本属性默认继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text-indent、text-align、text-shadow、text-transform、direction
- 列表元素默认继承：list-style、list-style-type、list-style-position、list-style-image
- 表格元素默认继承：border-collapse
| 默认不继承属性（non-inherited properties） |
- 所有元素默认不继承：all、display、overflow、contain
- 文本属性默认不继承：vertical-align、text-decoration、text-overflow
- 盒子属性默认不继承：width、height、padding、margin、border、min-width、min-height、max-width、max-height
- 背景属性默认不继承：background、background-color、background-image、background-repeat、background-position、background-attachment
- 定位属性默认不继承：float、clear、position、top、right、bottom、left、z-index
- 内容属性默认不继承：content、counter-reset、counter-increment
- 轮廓属性默认不继承：outline-style、outline-width、outline-color、outline
- 页面属性默认不继承：size、page-break-before、page-break-after
- 声音属性默认不继承：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during
| all 重置所有属性值 |
all属性值可以为inherit，initial，unset，或revert，可以一次重置或继承所有属性
=========================================================================================
参考文档：
Cascade_and_inheritance
CSS简单的继承
109
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
