淺析css的display屬性

本文主要和大家淺析css的display屬性,需要的朋友可以參考下，希望能協助到大家。下面跟隨小編一起來看一下吧。

display有哪些比較常用的值呢？

在通常的項目開發中比較容易被使用的值主要有：

none（元素不會被顯示）;
block（元素將顯示為區塊層級元素，元素前後會帶有分行符號）;
inline（元素會被顯示為內嵌元素，元素前後沒有分行符號）;
inline-block（行內塊元素。CSS2.1 新增的值）;
table（元素會作為塊級表格來顯示，類似 <table>，表格前後帶有分行符號）;
table-row（元素會作為一個表格行顯示，類似 <tr>）;

table-cell（元素會作為一個表格儲存格顯示，類似 <td> 和 <th>）。

有所區別的display="none"和visibility="hidden"？

一眼看去，他們都是元素隱藏的意思；沒錯，它們確實是元素隱藏哦！但是，它們還是有所區別的啦！

visibility="hidden"表示（僅）隱藏，不可恢複。當visibility被設定為"hidden"的時候，元素雖然被隱藏了，仍然佔據它原來所在的位置。visibility會保留元素的位置。元素被隱藏之後，就不能再接收到其它事件了，也不能再接收響應到事件了，因此也就無法通過JS令其顯示出來。

display="none"隱藏（元素消失），可恢複。當display被設定為"none"的時候，除了元素隱藏之外，與visibility="hidden"完全相反。

display與visibility的屬性值的設定，還有迴流與重繪上的區別哦！想瞭解迴流與重繪詳情請點擊：《頁面迴流與頁面重繪》

jQuery 與 zepto 中dispaly:none的區別？

dispaly:none在jQuery 與 zepto 中的區別！想必大部分初學者還是不瞭解的吧！想瞭解jQuery 與 zepto 中dispaly:none的區別，嘿嘿，那就點擊：《jQuery 與 zepto 中dispaly:none的區別》

相關推薦：

display屬性大全

顯示display元素常見屬性整理

css display屬性