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軸順序，而且還將建立以該元素爲根的新層疊順序上下文   好像理解了一半
	每一個堆疊塔表明一堆積木的堆疊環境