css深入淺出 03 堆疊上下文

2021-09-24 07:10:43 字數 2111 閱讀 7665

堆疊順序:

判斷乙個人是否了解堆疊上下文的概念時,我想到了下面的這道題

看上面的圖思考下面的這個問題: border和background之間的關係是什麼? a:在同一面上,相平齊 b:border更加靠近使用者 c:background更加靠近使用者

為了驗證上面的猜想,我引入0.5透明度border的現象來實現最終效果

顯然可以看出:border更加靠近使用者。 由此我們可以想到div它並不是乙個平面的物體,也是有層次的概念。

通過平面和側面的圖也可以看出效果

同樣,為了驗證在div中寫入文字驗證最終效果:

側面實際呈現是:

接著我在div的子元素引入的child來驗證堆疊效果:

最終的結果是div的元素效果是蓋不住文字(內聯元素)效果。也就是說內聯元素離使用者更加接近。

最後我想到了乙個同級化的問題,當我的子代出現內聯元素和父級同時出現內聯元素時,誰會更加接近使用者的眼睛?

結果是非常明顯的,誰最後寫入誰就更加接近使用者的眼睛(蓋住前面元素)。

上面我們通過猜想驗證的方式簡單的介紹了border,background和塊級元素,接下來我們再來驗證一下浮動元素:

為了更直觀的看出效果,我給內聯元素『你好』設定了text-indent: -10px; 效果如圖:

很顯然,內聯元素的更加出現在上層,而浮動的元素天生優先於塊級元素

截止至目前我們看到的所有效果:內聯元素》浮動元素/浮動內聯元素》塊級元素》border>background

其中,有關於內聯元素誰最後寫入誰更加浮現在使用者面前。

接下來我們接著比較絕對定位和相對定位元素的堆疊上下文的優先順序誰更高?

可以看出經過絕對定位的元素優先順序是高於浮動定位的元素的!

接下來比較z-index和position:relative之間的優先順序:

通過對relative設定margin-top來清楚的可以看到relative的優先順序是高於z-index的。

這時候我們得出乙個結論:只有被定位的元素的優先順序等級才會高於沒有被定位的優先順序的元素(position:static)

同樣,通過上圖我們可以得出,設定了relative的元素後出現的元素優先順序一定高於先出現的元素。

而對relative設定了z-index(>=1)元素的優先順序則高於沒有設定z-index的relative的元素。

在考慮position:absolute與relative做對比時,同樣也是只考慮z-index的影響:

上圖說明對relative與absolute做比較時,誰後出現誰的優先順序就更高。可以把absolute和relative當作同級來看待,但是如果對其中乙個元素設定了z-index就會可以看出通過設定absolute/relative的元素優先順序都會高於沒有設定z-index的元素。

注:如果父元素z-index:0 子元素設定z-index:-1則子元素則會顯示出來

所以說,正如自然界很多物質一樣。我們無法解釋它的原理,但是可以通過現象來判斷它的屬性。如果這麼說起來你聽的有點麻煩,那麼我問你:"請問:什麼是桌子?" 我想你可能說:上面是個平板下面有四根腿撐著的木頭叫做桌子.那麼接著反問你:板凳算不算是桌子?如果算,為什麼不叫板凳是桌子?如果不算,桌子不也是四根腿,一面平板嗎!所以究其本質我們可以說:用來吃飯的載體我們可以判斷它就是桌子。

同樣的道理我們可以引申到堆疊上下文,我們只知道一些屬性會觸發上下文,但是並不知道堆疊上下文是什麼。 所以觸發堆疊上下文的內容有以下:

通過上圖我們可以看出,圖中沒有z-index。但是依然形成了堆疊上下文的效果。之所以引發這種效果的原因是滿足了堆疊上下文的第乙個條件根元素**** 其次,如果父元素html是乙個家長,是其內部都具備堆疊上下文的結構。但是如果給乙個子元素單獨設定堆疊上下文,而另乙個子元素沒有設定堆疊上下文,則沒有設定堆疊上下文效果的內容將會被掩蓋。

上**釋了如果兩個子元素同時設定了堆疊上下文那麼兩個子元素則具備兄弟同時競爭,後出現的優先順序較高的效果. 最後我們需要考慮到一種最特殊的情況:如果給最高端元素設定z-index:-1則後代元素就會顯示出來,這是因為此時的層疊上下文從總體來看是乙個整體,所以後代元素會顯示出來,而不是被子代或者孫子代掩蓋住。

03 深入淺出索引上下

三種索引 全文索引,雜湊索引,b 樹索引 索引維護 頁 隨機插入,向右 索引的選擇 身份證id or 自增主鍵 效能 儲存。效能 身份證id,是隨機插入,頁 是中間 可能會造成一定的儲存浪費,次數頁比較多。但是自增主鍵,只有頁滿才會將新點 到下乙個頁,效率是最高的。儲存 乙個b 樹節點,儲存的身份證...

css 深入淺出定位

這一對的問題我們應該怎麼解決。還沒有開始定位啊.應該怎麼辦了?大家看看這個東西其他他就是乙個普通流。html裡面的寫法就是從上到下,從左到右的排版布局。每個非浮動塊級元素都獨佔一行,從上到下排列,內聯元素則從左到右排列。如果當前行不能排列下來,則另一起一行然後浮動排列。大家知道文件流後對於後面的定位...

深入淺出 JVM (7) 棧上分配

迴圈建立1000000000乙個物件,阻止棧上分配 棧上分配條件 開啟逃逸分析 開啟標量替換 jvm 引數 server xmx10m xms10m xx doescapeanalysis xx printgc 使用 server 模式棄用逃逸分析 server xx doescapeanalysi...