用法
display 屬性規(guī)定元素應(yīng)該生成的框的類型;
每個(gè)元素的display都有一個(gè)默認(rèn)值.
display屬性值
默認(rèn)值為block的元素:
p,form,header,footer,section,div,table,pre, h1~h6, dl, ol, ul
1.block元素會(huì)獨(dú)占一行怯疤，多個(gè)block元素會(huì)各自新起一行拔疚。默認(rèn)情況下怜俐，block元素寬度自動(dòng)填滿其父元素寬度。
2.block元素可以設(shè)置width,height屬性霍狰。塊級(jí)元素即使設(shè)置了寬度,仍然是獨(dú)占一行。
3.block元素可以設(shè)置margin和padding屬性葛圃。
栗子:
<div>p,form,header,footer,section : 我們都是塊級(jí)元素</div>
瀏覽器顯示效果:
默認(rèn)值為inline的元素:
span, a, strong, em,label,input, select, textarea, img, br
1.inline元素不會(huì)獨(dú)占一行诬烹，多個(gè)相鄰的行內(nèi)元素會(huì)排列在同一行里，直到一行排列不下冗尤，才會(huì)新?lián)Q一行听盖，其寬度隨元素的內(nèi)容而變化。
2.inline元素設(shè)置width,height屬性無(wú)效裂七。
3.inline元素的margin和padding屬性皆看，水平方向的padding-left, padding-right, margin-left, margin-right都產(chǎn)生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會(huì)產(chǎn)生邊距效果背零。
栗子:
<span>span, a, strong, em,label,input, select, textarea,
img, br都是行 內(nèi)元素</span>
瀏覽器顯示效果:
默認(rèn)值為none的元素:
script
一些專門(mén)的元素腰吟，如腳本使用none作為他們的默認(rèn)值;
此元素不會(huì)被顯示。
<i>與visibility:hidden的區(qū)別</i>:
visibility是控制元素是否顯示出來(lái)徙瓶，它并不控制元素是以塊毛雇、單元格嫉称、行或者其他的外觀。
當(dāng)你想隱藏一個(gè)元素的時(shí)候禾乘，如果用display:none的話澎埠，這個(gè)元素就完全不顯示，也不占位置始藕，不遮蓋比它z-index小的元素蒲稳。但是如果你用visibility:hidden的時(shí)候，元素雖然不會(huì)顯示在網(wǎng)頁(yè)上伍派，但是元素還是會(huì)占位江耀，而且也會(huì)覆蓋比它z-index小的元素，visibility:hidden只是讓元素變得不可見(jiàn)而已诉植。
栗子:
<div id="a" style="z-index:2;">A</div>
<div id="b" style="z-index:1;">B</div>
<div id="c" style="z-index:0;">C</div>
#b{display: none;}
<div id="a" style="z-index:2;">A</div>
<div id="b" style="z-index:1;">B</div>
<div id="c" style="z-index:0;">C</div>
#b{visibility:hidden;}
display:inline-block
簡(jiǎn)單來(lái)說(shuō)就是將對(duì)象呈現(xiàn)為inline對(duì)象祥国，但是對(duì)象的內(nèi)容作為block對(duì)象呈現(xiàn)。之后的內(nèi)聯(lián)對(duì)象會(huì)被排列在同一行內(nèi)晾腔。
栗子:
<div id="a" style="z-index:2;">A</div>
<div id="b" style="z-index:1;">B</div>
<div id="c" style="z-index:0;">C</div>
#a{ background-color: aqua;
width: 20px;
height: 80px;
}
#b{ display: inline-block;
background-color: aqua;
width: 20px;
height: 80px;
}
在瀏覽器顯示效果:
<i>關(guān)于z-index的介紹,將會(huì)在之后的文章中更新</i>
