讓乙個元素消失的辦法

2021-09-25 23:19:31 字數 847 閱讀 9705

1、最常用之——display: none;

給元素設定display: none;後,元素會從頁面中徹底消失,它原本佔據的空間會被其他元素占有,會造成瀏覽器的回流與重繪。

2、最常用之——visibility: hidden;

給元素設定visibility: hidden;後,元素會從頁面中消失,它原本佔據的空間會被保留,會造成瀏覽器的重繪,適用於希望元素隱藏又不影響頁面布局的場景。

3、隱身**——opacity: 0;

給元素設定opacity: 0;後,元素變成透明的我們肉眼就看不到了,所以原本佔據的空間還在。

4、設定盒模型屬性為0

將height、width、padding、border、margin等盒模型屬性的值全設為0,如果元素內還有子元素或內容,還應overflow: hidden;來隱藏子元素。

.box1
5、設定元素絕對定位與top、right、bottom、left等將元素移出螢幕。

.box1 

或:.box1

6、設定元素的絕對定位與z-index,將z-index設定成盡量小的負數。

但z-index是相對而言的 ,用z-index就要設定其他元素的z-index值,且如果元素本身佔據空間很大就不一定會被z-index值比它大的元素完全覆蓋,所以不推薦這種方法。

如:

.box1 

.box2

CSS讓元素消失的方法

1.position absolute top 999px left 999px 比元素本身的width和height大即可 2.display none 3.visibility hidden 4.height 0 or width 0 前提是沒有border 5.opacity 0 6.tran...

讓乙個元素隱藏的方法

在寫頁面的時候,經常會讓乙個元素進行隱藏。下面是自己總結的一些方法。如果大家有新的想法,請不吝賜教,謝謝!先給出一段 style type text css ul,body ulli style head body ul li 首頁 li li 導航 li li 新聞 li li 關於 li ul ...

讓元素消失的方法與區別

一 方法 1.visibility hidden 2.display none 3.z index 1 4.opacity 0 二 區別 1.opacity 0,該元素隱藏起來了,但不會改變頁面布局,並且,如果該元素已經繫結一些事件,如click事件,那麼點選該區域,也能觸發點選事件的 2.visi...