CSS层级关系 学习笔记

 

 

CSS 文档流
格式化上下文	Formatting Context 即初始元素定义的环境
块格式化上下文	Block Formatting Context BFC
行内格式化上下文	Inline Formatting Context
让元素脱离文档流的办法	float 其它元素对它围绕无视  postion:absolute 其它元素对它完全无视
创建块格式化上下文的方法	根元素或包含根元素的元素 浮动元素（元素的 float 不是 none） 绝对定位元素（元素的 position 为 absolute 或 fixed） 行内块元素（元素的 display 为 inline-block） 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值） 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值） 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table） overflow 值不为 visible 的块元素 display 值为 flow-root 的元素 contain 值为 layout、content或 strict 的元素 弹性元素（display为 flex 或 inline-flex元素的直接子元素） 网格元素（display为 grid 或 inline-grid 元素的直接子元素） 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1） column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。
三维空间	如果所有元素都在文档流中，那么后面的元素会在上面
position属性定位元素	除了默认的static值外的元素就是定位元素
	每个元素都属于一个层叠上下文
	层叠上下文中具有相同堆栈级别的框根据文档树出现的顺序层叠在一起？？？ 不懂
层叠水平	Stacking Level  所有元素都有层叠水平 相当于职级   然后，对于普通元素的层叠水平，我们的探讨仅仅局限在当前层叠上下文元素中。为什么呢？因为否则没有意义 这句什么意思   普通元素的层叠水平优先由层叠上下文决定，因此，层叠水平的比较只有在当前层叠上下文元素中才有意义。   注意 层叠水平 不是 z-index
层叠顺序	负z-index值：层叠上下文内有着负z-index值的子元素。 块级盒：文档流中非行内非定位子元素。 浮动盒：非定位浮动元素。 行内盒：文档流中行内级别非定位子元素。 z-index: 0：定位元素。 这些元素形成了新的层叠上下文。 正z-index值：定位元素。 层叠上下文中的最高等级。
	z-index属性只适用于定位元素。所以，即使为元素提供z-index的值将其置于其他元素之前，z-index也不会对元素产生影响，除非它被定位；也就是说，除非它具有除static之外的position值。
	如果你想要更改定位元素在z轴上的渲染顺序，可以使用z-index属性。例如，你有两个绝对定位的元素，它们在某个点上重叠，并且你希望其中一个元素显示在另一个元素的前面，即使它在源代码中出现在它之前，你也可以使用z-index属性来实现这一点 没看懂
	获取除默认值auto之外的z-index值的元素实际上为其所有定位的后代元素创建层叠上下文。我们之前提到过，每个层叠上下文都有一个根元素，它包含其中的所有元素。当你将z-index属性应用于这个元素时，它将在其包含的下下文中指定元素的z轴顺序，并且还将创建以该元素为根的新层叠顺序上下文   好像理解了一半
	每个堆叠塔代表一堆积木的堆叠环境