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 不顯示對應的元素,在文...