display運用與理解

2021-07-15 12:44:35 字數 1722 閱讀 8438

display:規定元素應該生成的框的型別

以下是一些關於display比較常用的屬性值:值描述

none

元素不會顯示

block

此元素將顯示為塊級元素,此元素前後會帶有換行符。

inline

預設。此元素會被顯示為內聯元素,元素前後沒有換行符。

line-block

行內塊元素。(css2.1 新增的值)[ie6/7不支援]

list-item

此元素會作為列表顯示。

inline-table

此元素會作為內聯**來顯示(類似 table),**前後沒有換行符。

table

此元素會作為塊級**來顯示(類似 table),**前後帶有換行符。

table-row

此元素會作為乙個**行顯示(類似 tr)。

table-cell

此元素會作為乙個**單元格顯示(類似 td 和 th).

inherit

規定應該從父元素繼承 display 屬性的值。

display較為常用的還是block\inline\inline-block,我就這幾個屬性值做一下對比,有一些是自己用到的理解,可能不太正確。

display:block

1. block元素會獨佔一行,多個block元素會各自新起一行。預設情況下,block元素寬度自動填滿其父元素寬度;

2. block元素可以設定width、height屬性,塊級元素即使設定了寬度,仍然是獨佔一行

3. block元素可以設定margin和padding屬性

display:inline

1. inline元素不會獨佔一行,多個相鄰的行內元素會排列在同一行裡,直到一行排列不下,才會新換一行,其寬度隨元素的內容而變化

2. inline元素設定width、height屬性無效

3. inline元素的margin和padding屬性,水平方向的padding-left、padding-right、margin-left、margin-right都產生邊距效果;但豎直方向的padding-top、padding-bottom、margin-top、margin-bottom不會產生邊距效果

display:inline-block

1. 將物件呈現為inline物件,但是物件的內容作為block物件呈現,之後的內聯物件會被排列在同一行內。

在使用display:inline-block的時候發現元素間具有空隙

剛開始看到這個問題的時候簡直抓毛啊,後來查了一下材料,發現只要運用font-size:0就能讓空隙消失,具體為什麼我還沒懂。

.ver

理解與應用css中的display屬性

display屬性是我們在前端開發中常常使用的乙個屬性,其中,最常見的有 下面,我將按照順序將上述幾種屬性做乙個完整的講解。none這個值表示此元素將不被顯示。比如,當我們在瀏覽網頁時,如果看到了某個煩人的廣告遮擋了我們的實現,更為可氣的是,它還沒有關閉的選項,這時 以chrome為例 我們就可以按...

深入理解Display類的使用

深入理解display類的使用 email cqucyf gmail.com 熟悉了midlet類的使用以後,下面來熟悉一下display類的使用,這個類也是進行j2me程式設計中經常要使用到的類之一。display類有兩個最主要的作用 1 獲得螢幕的屬性。例如螢幕是否是彩色的,以及支援的顏色數量等...

visibility與display的區別

visibility與display之設定元素顯隱的區別 在css裡的visibility 屬性,通常其值被設定成visible 或hidden。visibility hidden 相當於display none,能把元素隱藏起來,但是兩者的區別在於 display none 不顯示對應的元素,在文...