【CSS】CSS 世界 — 元素的顯示與隱藏學習總結

愛陽光的小菇涼發表於2018-11-20
CSS

一、Display 幾種隱藏方式

1、希望元素不可見、不佔據空間、輔助裝置無法訪問、不渲染

使用<script>標籤：

<script type=“text/html”>
    <img src=“1.jpg">
</script>

獲取<script>標籤隱藏的內容：
script.innerHTML

2、希望元素不可見、不佔據空間、輔助裝置無法訪問、有資源載入、DOM可訪問

使用display:none隱藏

3、希望元素不可見、不佔據空間、輔助裝置無法訪問、隱藏的時候可以有transition淡入淡出效果
.hidden {
    position: absolute;
    visibility: hidden;
}
4、元素不可見、不能點選、輔助裝置無法訪問，但是佔據空間
   visibility：hidden
5、元素不可見、不能點選、不佔據空間，但是鍵盤可以訪問，使用clip進行裁剪處理
.clip {
    position: absolute;
    clip: rect(0 0 0 0);  // clip 屬性剪裁絕對定位元素，唯一合法的形狀值是：rect (top, right, bottom, left)
} 
.out {
    position: relative;
    left: -999em;
 }
6、元素不可見、不能點選、佔據空間、可被鍵盤訪問，利用絕對定位和z-index來設定隱藏
.lower {
      position: relative;
      z-index: -1;
}
7、元素不可見、不佔據空間、但是可以點選，可以使用透明度
.opacity {
    position: absolute; //position的作用是使元素脫離文件流，使其不佔據空間
    opacity: 0;
    filter: Alpha(opacity=0);
}
8、單純的想使元素不可見，位置保留也可以點選，可直接設定透明度為0
.opacity {
    opacity: 0;
    filter: Alpha(opacity=0);
}

Display:none顯示隱藏不會影響animation動畫，但是會影響transition過渡效果的執行，所以transition往往和visibility搭配

二、Visibility與元素的隱顯

1、visibility繼承性

父元素設定 visibility:hidden，子元素也會看不見，究其原因是繼承性，子元素繼承了 visibility:hidden，但是，如果子元素設定了 visibility:visible，則子元素又會顯示出來,這個和 display 隱藏有著質的區別。

應用場景： 使用者上傳頭像，實時顯示並裁減
實現方式： 模組外部容器設定 visibility:hidden，剪裁區域裡面放一個載入效果，設定visibility:visible。圖片尺寸獲取成功後，再正常初始化，然後讓外部容器 visibility 屬性重置為 visible。這樣體驗就會好很多，使用者只會看到“載入中→剪裁介面”，而不是“佔 位介面→載入中→最終操作介面”。

2、visibility與css計數器

visibility:hidden 不會影響計數器的計數

3、visibility與transition

hover屬性下，下述程式碼會在hover時顯示target子元素，但是不會有過渡效果

.box > .target {
    display: none;
    position: absolute;
    opacity: 0;
    transition: opacity .25s;
}
.box:hover > .target {
    display: block;
    opacity: 1;
 }

下面的程式碼可以實target子元素現淡入淡出的過渡效果，這是由於CSS3 transition支援的CSS屬性中有visibility，但是並沒有 display。

.box > .target {
    position: absolute;
    opacity: 0;
    transition: opacity .25s;
    visibility: hidden;
}
.box:hover > .target {
    visibility: visible;
    opacity: 1; 
}

相關文章