總體概念
block 和 inline 這兩個(gè)概念是簡(jiǎn)略的說(shuō)法，完整確切的說(shuō)應(yīng)該是 block-level elements (塊級(jí)元素) 和 inline elements (內(nèi)聯(lián)元素)岩齿。
block 元素通常被現(xiàn)實(shí)為獨(dú)立的一塊，會(huì)單獨(dú)換一行癣诱。
inline 元素則前后不會(huì)產(chǎn)生換行，一系列 inline 元素都在一行內(nèi)顯示撕予，直到該行排滿。
常見(jiàn)的塊級(jí)元素有：div剑按、form、table艺蝴、p鸟废、pre、h1~h6盒延、dl、ol添寺、ul 等。
常見(jiàn)的內(nèi)聯(lián)元素有：span博脑、a票罐、strong叉趣、em该押、label、input烟具、select奠蹬、textarea朝聋、img罩润、br 等
display 屬性中的 block，inline 和 inline-block
1.display: block
- block 元素會(huì)獨(dú)占一行割以，多個(gè) block 元素會(huì)各自新起一行金度。默認(rèn)情況下严沥，block元素寬度自動(dòng)填滿其父元素寬度。
- block 元素可以設(shè)置 width消玄，height 屬性。塊級(jí)元素即使設(shè)置了寬度翩瓜，仍然是獨(dú)占一行。
- block 元素可以設(shè)置 margin 和 padding 屬性兔跌。
.item {
background: yellow;
display: block;
width: 50px;
height: 50px;
padding: 10px;
margin: 20px;
border-style: solid;
border-width: 1px;
}
<div class='item'>123</div>
<div class='item'>456</div>
效果：
2.display: inline
- inline 元素不會(huì)獨(dú)占一行，多個(gè)相鄰的行內(nèi)元素會(huì)排列在同一行里坟桅，直到一行排列不下，才會(huì)新?lián)Q一行赖舟，其寬度隨元素的內(nèi)容而變化夸楣。
- inline元素設(shè)置 width，height 屬性無(wú)效裕偿。
- inline 元素的 margin 和 padding 屬性，水平方向的 padding-left劲腿，padding-right，margin-left焦人，margin-right 都產(chǎn)生邊距效果重父；但豎直方向的 padding-top，padding-bottom房午，margin-top，margin-bottom 不會(huì)產(chǎn)生邊距效果袋倔。
.item {
background: yellow;
display: inline;
width: 50px;
height: 50px;
padding: 10px;
margin: 20px;
border-style: solid;
border-width: 1px;
}
<div class='item'>123</div>
<div class='item'>456</div>
效果：
3.display: inline-block
將對(duì)象呈現(xiàn)為 inline 對(duì)象，但是對(duì)象的內(nèi)容作為 block 對(duì)象呈現(xiàn)批狐。內(nèi)聯(lián)對(duì)象會(huì)被排列在同一行內(nèi)，既具有 block 的寬度高度特性又具有 inline 的同行特性嚣艇。
.item {
background: yellow;
display: inline-block;
width: 50px;
height: 50px;
padding: 10px;
margin: 20px;
border-style: solid;
border-width: 1px;
}
<div class='item'>123</div>
<div class='item'>456</div>
效果：
