首頁 > web前端 > css教學 > 淺析css的display屬性

淺析css的display屬性

零到壹度
發布: 2018-03-21 13:44:09
原創
1495 人瀏覽過

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

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

在通常的專案開發中比較容易被使用的值主要有:

none(元素不會被顯示) ;
block(元素將顯示為區塊級元素,元素前後會帶有換行符號);
inline(元素會被顯示為內聯元素,元素前後沒有換行符號);
inline-block (行內區塊元素。CSS2.1 新增的值);
table(元素會作為區塊級表格來顯示,類似

,表格前後都有換行符號);
table-row(元素會作為一個表格行顯示,類似);

table-cell(元素會作為一個表格單元格顯示,類似

和< 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屬性#

以上是淺析css的display屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板