它可以讓行內(nèi)顯示為塊的元素,變?yōu)樾袃?nèi)顯示,例如
<div> DIV1 </div>
<div> DIV2 </div>
這里DIV1和DIV2分別占一行,但是你給他們加上屬性后變了
<div style= "display:inline "> DIV1 </div>
<div style= "display:inline "> DIV2 </div>
DIV1和DIV2這時候顯示在同一行了,試試看吧
和 display:inline 對應(yīng)的是 display:block,block 會讓應(yīng)用了該 CSS 屬性的 HTML 標記變成塊級別元素,例如 SPAN 是行內(nèi)顯示的,但是你加了 display:block 屬性就不一樣了
<span style= "display:block "> SPAN1 </span>
<span style= "display:block "> SPAN2 </span>
display:inline比較經(jīng)典的用法是用在 <ul> 下的 <li> 中
內(nèi)聯(lián)
block一般一個塊占一行,除非float
inline是自動排為一行,就象段內(nèi)的文字一樣,可成為多行。
display:inline 的作用是設(shè)置對象做為行內(nèi)元素顯示,
inline是內(nèi)聯(lián)對象的默認值(ps:內(nèi)聯(lián)對象就是不自動產(chǎn)生換行的元素,比如span)
而我們一般用的div是塊級元素,默認display屬性是block,
但將div的display設(shè)置為inline的話,則多個div可以象span一樣顯示在一行了。
建議樓主在網(wǎng)上下個css幫助手冊
display屬性
block : CSS1 塊對象的默認值。將對象強制作為塊對象呈遞,為對象之后添加新行
none : CSS1 隱藏對象。與 visibility 屬性的hidden值不同,其不為被隱藏的對象保留其物理空間
inline : CSS1 內(nèi)聯(lián)對象的默認值。將對象強制作為內(nèi)聯(lián)對象呈遞,從對象中刪除行
inline-block : IE5.5 將對象呈遞為內(nèi)聯(lián)對象,但是對象的內(nèi)容作為塊對象呈遞。旁邊的內(nèi)聯(lián)對象會被呈遞在同一行內(nèi)
compact : CSS2 未支持。分配對象為塊對象或基于內(nèi)容之上的內(nèi)聯(lián)對象
marker : CSS2 未支持。指定內(nèi)容在容器對象之前或之后。要使用此參數(shù),對象必須和 :after 及 :before 偽元素一起使用
inline-table : CSS2 未支持。將表格顯示為無前后換行的內(nèi)聯(lián)對象或內(nèi)聯(lián)容器
list-item : CSS2 將塊對象指定為列表項目。并可以添加可選項目標志
table-caption : CSS2 未支持。將對象作為表格標題顯示
table-cell : CSS2 未支持。將對象作為表格單元格顯示
table-column : CSS2 未支持。將對象作為表格列顯示
table-column-group : CSS2 未支持。將對象作為表格列組顯示
table-header-group : CSS2 將對象作為表格標題組顯示
table-footer-group : CSS2 將對象作為表格腳注組顯示
display:inline 對應(yīng)不顯示為 display:none
display:block 對應(yīng)不顯示為 hidden
說通俗點 樣式為none的元素不占位置,而樣式為hidden的元素雖然不顯示但還是占地方。