在瀏覽論壇的時候,看到有朋友在面試的時候被問了有幾種方法實現讓一個div隱藏,下面來總結一下:

1. display:none;

該屬性會完全隱藏元素,並不會佔據頁面空間

1. visibility:hidden;

該屬性僅僅是隱藏元素,但會佔據頁面空間

display:none和visibility:hidden的區別是：

display:none是徹底消失，不在文件流中佔位，瀏覽器也不會解析該元素；visibility:hidden是視覺上消失了，可以理解為透明度為0的效果，在文件流中佔位，瀏覽器會解析該元素；

使用visibility:hidden比display:none效能上要好，display:none切換顯示時，頁面產生迴流（當頁面中的一部分元素需要改變規模尺寸、佈局、顯示隱藏等，頁面重新構建，此時就是迴流。所有頁面第一次載入時需要產生一次迴流），而visibility切換是否顯示時則不會引起迴流。

總結:輪播圖頁面渲染時使用visibility:hidden,這樣在渲染第二個tab時還是能夠獲得自適應寬度,如果採取display:none那麼寬高為0

1. background-color:transparent;或者設成與背景一樣的顏色即可

該屬性就是把背景色設定為透明或者與原來背景色相同,但是這樣的屬性如果該div設定了寬高,仍然佔據位置

1. opacity來設定不透明級別，注意相容性filter(濾鏡)

0.0 （完全透明）到 1.0（完全不透明）

1. 給div一個margin負值，這個負值恰好等於div自身的高度或寬度

1. 設定兩個大小一樣的div，第一個左浮動，第二個不浮動，即可將第二個div隱藏

原理:浮動脫離正常文件流,第一個會將第二個覆蓋,但並不表示第二個就消失了,知識覆蓋了而已,如果第一個div比第二個小,那麼第二個還是會顯示的

1. 設定一個父div和一個子div，子div絕對定位，父div相對定位，子div的left就是子div的寬度

道理同5

8.給父div1設定一個固定的寬度，給子div2設定的寬度遠大於父div，並給父div1設定overflow:hidden,並給子div設定margin值即在父div1中沒被隱藏的剩餘寬度，程式碼如下：

#div1{width:100px;height:200px;overflow:hidden;}

#div2{width:200px;height:200px;background:green;margin-left:100px;}

9.將div的寬度和高度設定為0

上面是幾種思路,並不代表能實現的全部方法,事在人為呢~