知識點滴 HTML頁面元素顯示 隱藏方式及區別

作為前端大家都知道在網頁中控制元素的顯示與隱藏的方式有很多，不過大家更喜歡的是使用 display: none; 以及 display: block; 的方式來操作。理論上來說，這個方式是最簡單有效的，不過在這裡我想說幾個小志個人對顯示隱藏頁面元素的幾種方式看法：

display 屬性的方式；

visibility 屬性的方式；
opacity 屬性的方式；
width & height 屬性的改變；
transform 屬性中的 scale 屬性值的利用；
zoom 屬性的使用；
position 定位屬性的方式；
margin 屬性的利用；
transform 屬性中的 translate 屬性值的利用；
background & color 等顏色值相同時；
mask 屬性的使用；
……

可見與不可見；

透明度的改變；
元素大小的改變；
元素位置的移動；
找個遮擋物；

通過上面的幾個特性，我們可以根據具體的頁面情況來選擇使用，或者結合使用。

看得見的與看不見的，其實隱藏了就看不見了，不隱藏麼當然就看見咯。在 css 中控制元素的不可見，常用的首選的肯定是 display: none; 的方式了，其次應該就是 visibility 這個屬性。對於這兩個屬性，最大的區別就是：

display: none; 直接「銷毀」元素在頁面中的位置；

visibility: hidden; 直接讓元素不可見，但元素的物理空間位置還是存在的；

如果要讓元素從不可見到可見的狀態，根據我們使用的 css 屬性，去修改屬性值即可，常見的就是：

display: block; 

visibility: visible;

不過如果頁面元素中使用 transition 來作為過渡效果的話，那麼這兩種可見與不可見的過渡效果就可能看不到了哦。

其實我還想說一下 display 屬性控制顯示隱藏的一些注意點，不過呢，我先把其他幾個所謂的隱藏和顯示的方式扯完再說。

這個理解不難，在 css 中我們一般使用 opacity 屬性來修改透明度，只要設定 opacity: 0; 那麼元素就看不到了，變透明了。

這時候元素僅僅只是透明了，位置還是存在的，要想顯示出來，只要把 0 改為 1 即可。同時，如果使用了 transition 來做過渡效果的話，我們還是可以看到乙個從透明到不透明的過渡情況。

元素大小的改變，不僅可以通過 width & height 屬性來實現（當 width & height 的值為 0 時），還可以通過 transform 屬性中的 scale 來實現，甚至可以使用 zoom 的方式來實現。

zoom 的方式不會在 transition 時有過渡效果；

使用 zoom 屬性值，設定為 zoom: 0; 不一定會有效果，不過可以使用 zoom: 0.000009; 這樣來實現；

transform: scale(0); 雖然讓元素不可見了，不過元素的物理位置還是在，就算是 transform: scale(5); 放大了，元素原有的位置大小還是同樣保留，這個跟 zoom 還是有區別的；

width & height 屬性的使用這個很簡單也好理解，就是把元素的物理位置大小直接修改了，然後變為 0 的時候就什麼都看不到咯，當然，這個在 transition 中也是可以看到過渡效果的；

這個也好理解，通過改變元素的位置，挪到頁面外面去就好了。那麼改變元素的位置當然就是要使用 position/margin/transfrom: translate 的方式了；

position: relative; 會保留元素原有的位置；

而 position: absolute; 或者 position: fixed; 則會讓元素原來的位置消失；當然，使用了 position 屬性後，top/right/bottom/left 這四個值還是需要去選擇使用的，不然位置不會改變；
margin 屬性無非也就是四個方向設定很大的值，然後改變位置，不過位置是改變了，原來的物理位置還是在的；
transform: translate 的方式如果不考慮 translate3d 的時候，可以簡單理解成類似 margin 的方式，位置也是保留的，如果是考慮 translate3d 的話，也還是位置的改變，只不過不再是水平或者垂直方向的改變了；

以上說的位置改變來讓元素隱藏，結合 transition 都是可以看到過渡效果的。

這個方式感覺有點掩耳盜鈴，自欺欺人了，無非就是通過背景色和元素內容顏色相同什麼的，讓人的肉眼不會第一時間看到，或者通過把 z-index 的屬性值設定為負值或者被其他元素的 z-index 屬性值小的時候，丟到後面去讓人看不到。

在 css 3 中新增了乙個 mask 屬性，我們或許也是可以利用這個方式來讓乙個元素從有變無。

感覺這個方式好 low，基本上對於讓元素顯示或者隱藏不會去使用的，只會在特定情況下去使用一下。

以上只是個人對於顯示與隱藏的一點小看法，或許還有其他方式，但感覺上應該都差不多，可能是在這些基礎上做了一些變化吧。那麼具體我們會去使用什麼方式來顯示隱藏頁面元素，還是要結合需求點來考慮。

可能有部分人覺得使用 transition 產生乙個過渡效果會更好，那麼就不能使用 display 和 visible 的方式了，或許可以考慮使用 width & height & opacity 的方式來使用。記得 jquery 中 show() 和 hide() 就是通過這種方式來實現的，不知道有沒有記錯。

一般情況隱藏元素大家都還是會去使用 display: none; 的方式，然後通過 display: block; 讓元素顯示出來。不過這裡就小志個人所接觸的情況來看，使用 display: block; 顯示元素的這個時候，大部分針對的這個元素是 div 標籤或者其他的塊級元素。

畢竟類似 div 這樣的塊級元素只是用來包含其他元素的乙個「無語義」的標籤。

但是請大家不要盲目使用使用 display: block; 方式來改變原本 display: none; 隱藏掉的元素，因為並不是所有元素都是塊級元素。我們還是需要有針對性的去設定 display 的屬性值。
span 之類的內聯元素，我們應該使用 display: inline; 或者 display: inline-block;
table 標籤元素我們應該使用 display: table;
td 或者 th 的話，我們可能需要使用 display: table-cell;

當然，這也並不是絕對的，關鍵還是看各位在使用這些標籤的時候，是不是事先就已經改變了這個標籤 display 屬性值。不注意這個 display 屬性值的話，可能當我們把元素從隱藏轉變為顯示的時候，頁面的布局也會改變了。

知識點滴 HTML5 布局總結

布局總結 1 像這樣的行內標記，定義它的margin top和margin bottom是無效的，除非你把它設定為塊狀元素才可以。display block 2 對於塊狀元素，你可以自由的使用外邊距來定義版式和元素之間的距離。類似 div 等等，3 無論什麼元素，一旦設定為是浮動顯示，就擁有了完整的...

知識點滴 HTML5元素垂直居中那些事

一 摘要 讓乙個元素水平居中對於css來說非常簡單 如果是乙個內聯元素，我們可以在他的父元素上設定text align center 如果是乙個塊元素，我們可以使用margin auto 然而，只要一想到讓乙個元素垂直居中，讓人死的心都有了。多年來，垂直居中已成為css的不朽神話，也是前端專業人士群...

知識點滴 HTML5元素垂直居中那些事

讓乙個元素水平居中對於css來說非常簡單 如果是乙個內聯元素，我們可以在他的父元素上設定text align center 如果是乙個塊元素，我們可以使用margin auto 然而，只要一想到讓乙個元素垂直居中，讓人死的心都有了。多年來，垂直居中已成為css的不朽神話，也是前端專業人士群體中的乙個...