国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

《CSS世界》筆記五：CSS層疊規(guī)則及元素隱藏

godruoyi / 1210人閱讀

摘要：元素層疊順序補充說明位于最下面的特指層疊上下文元素后面會詳解的邊框和背景色。界中可能有其他的層疊結(jié)界，而自身也可能處于其他層疊結(jié)界中。

上一篇：《CSS世界》筆記四：流的保護與破壞

寫在前面

《CSS世界》這本書還剩六章，但是這本書的精華部分主要是前面的內(nèi)容，這里僅把后面章節(jié)相對重要的內(nèi)容以博客展示，想著了解更多的小伙伴還是去閱讀原文的好，畢竟三百多頁的一本書并不是小小幾篇博客能完全說清楚的。

這個也算是《CSS世界》讀書筆記系列博客的終結(jié)篇了，雖說是“二進宮”，收獲依然滿滿，畢竟好書每次讀都能讀出新東西。這里還是要吐槽幾句，前端崗位很多同學(xué)（肯定不包括帥氣的你啦！）都不太重視CSS，不就是布局嗎，記幾條屬性也就能夠?qū)崿F(xiàn)一個網(wǎng)頁布局，但是正是這些同學(xué)，往往在做適配和頁面調(diào)整時抱怨不斷，或者在調(diào)整時幾乎就是重構(gòu)，CSS代碼絲毫沒有健壯性可言，熟不知合理使用CSS屬性和健壯布局能為你省很多事，甚至能夠為你省去很多js代碼。這里似乎寫出了“CSS重要性”的論斷，哈哈！

一、CSS世界的層疊規(guī)則

聲明：CSS中并不只是z-index能夠決定元素的z軸順序。

1.1 元素層疊順序(stacking level)

補充說明：

位于最下面的 background/border 特指層疊上下文元素（后面會詳解）的邊框和背景色。每一個層疊順序規(guī)則僅適用于當(dāng)前層疊上下文元素的小世界；

inline水平盒子指的是包括inline/inline-block/inline-table元素的“層 疊順序”，它們都是同等級別的；

單純從層疊水平上看，實際上 z-index:0 和 z-index:auto 是可以看成是一樣的，實際上，兩者在層疊上下文領(lǐng)域有著根本性的差異

記憶要訣：

由于網(wǎng)頁是圖文展示為主，inline會高于標準流盒子和浮動盒子

元素一旦成為定位元素，其 z-index 就是默認的 auto，根據(jù)上面的層疊順序表，就會覆蓋 inline 或 block 或 float 元素

1.2 層疊上下文(stacking context) 
層疊上下文是一個概念，跟“塊狀格式化上下文” (BFC)類似。然而，概念這個東西是比較虛、比較抽象的，要想輕松理解，我們需要將其具象化。
怎么個具象化法呢？我們可以把層疊上下文理解為一種“層疊結(jié)界”，自成一個小世界。界中可能有其他的“層疊結(jié)界”，而自身也可能處于其他“層疊結(jié)界”中。

如何創(chuàng)建層疊上下文

（1）天生派：頁面根元素天生具有層疊上下文，稱為根層疊上下文（html標簽）

（2）正統(tǒng)派：z-index 值為數(shù)值的定位元素的傳統(tǒng)“層疊上下文”

對于position值為relative/absolute以及Firefox/IE(不包括Chrome)下含有position:fixed聲明的定位元素，當(dāng)其z-index值不是auto的時候，會創(chuàng)建層疊上下文

（3）擴招派：CSS3屬性創(chuàng)建

元素為flex布局元素(父元素display:flex | inline-flex)，同時z-index值不是auto

元素的opacity值不是1

元素的transform值不是none

元素mix-blend-mode值不是normal

元素的filter值不是none

元素的isolation值是isolate

元素的will-change屬性值為上面2~6的任意一個(如will-change: opacity、will-chang:transform等)

元素的-webkit-overflow-scrolling設(shè)為touch

CSS3創(chuàng)建層疊上下文引證：

由于層疊問題引發(fā)的bug：

描述：有一個絕對定位的黑色半透明層覆蓋在圖片上。但是，一旦圖片開始走 fadeIn 淡出的 CSS3 動畫，文字就跑到圖片后面去了，因為文字一直是 100%透明的純白色，文字變淡是因為跑到圖片后面，而圖片半透明，文字穿透顯示而已

原因：fadeIn 動畫本質(zhì)是 opacity 透明度的變化，“元素的opacity值不是1”時會創(chuàng)建層疊上下文，為1時為普通元素。導(dǎo)致層級發(fā)生變化時引發(fā)bug

1.3 層疊黃金準則（重點）

（1）誰大誰上：當(dāng)具有明顯的層疊水平標識的時候，如生效的 z-index 屬性值，在同一個層疊上下文領(lǐng)域，層疊水平值大的那一個覆蓋小的那一個

（2）后來居上：當(dāng)元素的層疊水平一致、層疊順序相同的時候，在 DOM 流中處于后面的元素會覆蓋前面的元素

下面有兩個案例，請問兩種情況的層疊順序：

答案：（1）1在上2在下；（2）1在下2在上

分析：z-index: auto所在的

元素是一個普通定位元素，于是，里面的兩個元素的層疊比較就不受父級的影響，兩者直接套用“誰大誰上”的準則;而z-index一旦變成數(shù)值，哪怕是 0，就會創(chuàng)建一個層疊上下文。此時遵循“層疊黃金準則”的另外一個準則“后來居上”，根據(jù)在DOM文檔流中的位置決定誰在上面

思考：在不居中層級錯亂時，可以找找父級元素的層級與目標元素(或父級)層級比較

1.4 zIndex可以為負值

對照著上面的層疊順序圖，我們可以知道zIndex為負值時是介于背景和普通流盒子之間的，直接看一個例子，請問下面的層疊情況

/* 情況一 */


    
son




/* 情況二 */


    
son




.father {
    width: 200px;
    height: 200px;
    background-color: rgba(0, 0, 255, .7);
}
.son {
    position: relative;
    z-index: -1;
    width: 200px;
    height: 100px;
    background-color: rgba(255, 0, 0, .7);
}

.transform {
    margin-top: 20px;
    transform: scale(1);
}

分析：

情況一：當(dāng).father是普通元素時，.son元素所在的層疊上下文元素一是.father的某個祖先元素；.son是 z-index 負值元素，.father是 block 元素，也就是.son應(yīng)該在.father元素的后面顯示，因此，.son會被.father元素的藍色背景覆蓋；

情況二：當(dāng).father是層疊上下文元素時，z-index 負值元素在層疊上下文元素的背景上，因此，.son在.father元素的藍色背景上；

二、元素隱藏 2.1 元素各種隱藏方法

（1）如果希望元素不可見，同時不占據(jù)空間，輔助設(shè)備無法訪問，但資源有加載，DOM 可訪問，則可以直接使用 display:none 隱藏

.dn { display: none; }

（2）如果希望元素不可見，同時不占據(jù)空間，輔助設(shè)備無法訪問，但顯隱的時候可以有transition 淡入淡出效果

.hidden {
    position: absolute;
    visibility: hidden;
}

（3）如果希望元素不可見，不能點擊，輔助設(shè)備無法訪問，但占據(jù)空間保留，則可以使用 visibility:hidden 隱藏

.vh { visibility: hidden; }

（4）如果希望元素不可見，不能點擊，不占據(jù)空間，但鍵盤可訪問，則可以使用 clip 剪裁隱藏

.clip {
    position: absolute;
    clip: rect(0 0 0 0);
}

（5）如果希望元素不可見，不能點擊，但占據(jù)空間，且鍵盤可訪問，則可以試試 relative 隱藏。例如，如果條件允許，也就是和層疊上下文之間存在設(shè)置了背景色的父元素， 則也可以使用更友好的 z-index 負值隱藏

.lower {
    position: relative;
    z-index: -1;
}

（6）如果希望元素不可見，但可以點擊，而且不占據(jù)空間，則可以使用透明度

.opacity {
    position: absolute;
    opacity: 0;
    filter: Alpha(opacity=0);
}

（7）如果單純希望元素看不見，但位置保留，依然可以點可以選，則直接讓透明度為 0

.opacity {
    opacity: 0;
    filter: Alpha(opacity=0);
}
2.2 display與visiblity隱藏比較

空間占據(jù)：

display:none 隱藏后的元素不占據(jù)任何空間

visibility:hidden 隱藏的元素空間依舊存在

后代隱藏原理：

display屬性值為none時，該元素以及所有后代元素都隱藏

visibility屬性值hidden時，子元素也會看不見，因為子元素繼承了visibility:hidden

因此，當(dāng)子元素設(shè)置visibility:visible;時，子元素又會顯現(xiàn)

    
    
  • 列表1
    • 
    
  • 列表 2
    • 
    
  • 列表 3
    • 
    
  • 列表4
    •

最終列表1和列表4依然會顯示

三、總結(jié)

CSS層疊上下文理解和創(chuàng)建

CSS層疊順序和規(guī)則

元素隱藏的各種方式及對比

上一篇：《CSS世界》筆記四：流的保護與破壞

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/113690.html

相關(guān)文章

  • 《CSS世界》筆記四：流的保護與破壞

    摘要：和可以看作是同父異母的兄弟關(guān)系。例子如下結(jié)果如下而父元素設(shè)置屬性的方式則是利用了的特性下面將會詳細講解結(jié)界全稱為，中文為塊級格式化上下文。 上一篇：《CSS世界》筆記三：內(nèi)聯(lián)元素與對齊下一篇：《CSS世界》筆記五：CSS層疊規(guī)則及元素隱藏 寫在前面 原本博客名為浮動與定位，但是《CSS世界》第六章節(jié)的內(nèi)容不僅有浮動定位，很大一部分篇幅都在講BFC和overflow。更吸引人的是，作者將...

    he_xd 評論0 收藏0

  • 《css世界》- 詳細重點筆記與技巧

    摘要：概述在世界這本書中有一些黑魔法給列舉出來，在結(jié)合自己的理解。篇幅有點長，希望大家能夠堅持看完，一定會有收獲以下是摘自每章內(nèi)一些重要的概念與技巧。 概述 在《css世界》這本書中有一些黑魔法給列舉出來，在結(jié)合自己的理解。篇幅有點長，希望大家能夠堅持看完，一定會有收獲！！！以下是摘自每章內(nèi)一些重要的概念與技巧。其中有解決圖片間隙的問題、小圖標與文字居中問題等; ps: 特別是 line-h...

    MasonEast 評論0 收藏0

  • 《css世界》- 詳細重點筆記與技巧

    摘要：概述在世界這本書中有一些黑魔法給列舉出來，在結(jié)合自己的理解。篇幅有點長，希望大家能夠堅持看完，一定會有收獲以下是摘自每章內(nèi)一些重要的概念與技巧。 概述 在《css世界》這本書中有一些黑魔法給列舉出來，在結(jié)合自己的理解。篇幅有點長，希望大家能夠堅持看完，一定會有收獲！！！以下是摘自每章內(nèi)一些重要的概念與技巧。其中有解決圖片間隙的問題、小圖標與文字居中問題等; ps: 特別是 line-h...

    趙連江 評論0 收藏0

  • CSS世界（文檔）

    摘要：整理完了高性能這本書，往下就需要快速處理世界，這本講解特性的書非常值得一讀，內(nèi)容完整，重點突出，實戰(zhàn)性強，就是語言啰嗦。由于全書內(nèi)容太多，而且需要一點一點的整理，所以放到了站點上，方便大家查看。 整理完了《高性能JavaScript》這本書，往下就需要快速處理《CSS世界》，這本講解CSS特性的書非常值得一讀，內(nèi)容完整，重點突出，實戰(zhàn)性強，就是語言啰嗦。由于全書內(nèi)容太多，而且需要一點一...

    CNZPH 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<