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