本文是對(duì)CSS的inline起宽、block與inline-block的總結(jié)整理
行內(nèi)元素一般是內(nèi)容的容器洲胖，而塊級(jí)元素一般是其他容器的容器，行內(nèi)元素適合顯示具體內(nèi)容坯沪，而塊級(jí)元素適合做布局绿映。
塊級(jí)元素(block)：
- 獨(dú)占一行，對(duì)寬高的屬性值生效屏箍；如果不給寬度绘梦，塊級(jí)元素就默認(rèn)為父元素的寬度。即使設(shè)置寬度赴魁，也是獨(dú)占一行卸奉。
- 當(dāng)指定了 width 和 height 的值時(shí)，內(nèi)容超出塊級(jí)元素的尺寸就會(huì)溢出颖御，這時(shí)塊級(jí)元素要呈現(xiàn)什么行為要看其 overflow 的值（visible,hidden,overflow,scroll)
行內(nèi)元素(inline)：
- 可以多個(gè)標(biāo)簽存在一行榄棵，對(duì)寬高屬性值不生效，完全靠?jī)?nèi)容撐開寬高潘拱。
- margin-top疹鳄、margin-bottom不起作用。padding和margin-left芦岂、margin-right起作用
- 如果想讓padding-top或者padding-bottom起作用瘪弓，只需要給padding-left或者padding-right設(shè)置一個(gè)值，或者當(dāng)inline的元素有內(nèi)容時(shí)就會(huì)起作用禽最。
行內(nèi)塊元素(inline-block)：
結(jié)合的行內(nèi)和塊級(jí)的優(yōu)點(diǎn)腺怯，既可以設(shè)置長(zhǎng)寬，可以讓padding和margin生效川无，又可以和其他行內(nèi)元素并排呛占。
其中img和input為行內(nèi)塊元素懦趋。
行內(nèi)元素與塊狀元素之間的轉(zhuǎn)換:
1. float:
當(dāng)把行內(nèi)元素設(shè)置完float后晾虑，該行內(nèi)元素的display屬性會(huì)被賦予block值，且擁有浮動(dòng)特性仅叫。行內(nèi)元素去除了之間的莫名空白帜篇。
2. position:
當(dāng)為行內(nèi)元素進(jìn)行定位時(shí)，position:absolute與position:fixed.都會(huì)使得原先的行內(nèi)元素變?yōu)閴K級(jí)元素诫咱。
3. display:
1坠狡、塊級(jí)標(biāo)簽轉(zhuǎn)換為行內(nèi)標(biāo)簽：display:inline;
2、行內(nèi)標(biāo)簽轉(zhuǎn)換為塊級(jí)標(biāo)簽：display:block;
3遂跟、轉(zhuǎn)換為行內(nèi)塊標(biāo)簽：display：inline-block;
注意點(diǎn)
1.text-align
text-align屬性對(duì)塊級(jí)元素起作用，對(duì)行內(nèi)元素不起作用（直接作用于行內(nèi)元素）：
<!-- 起作用 -->
<div style="text-align:center">test</div>
<!-- 不起作用 -->
<span style="text-align:center">span標(biāo)簽</span>
原因是塊級(jí)標(biāo)簽如果不給寬度，塊級(jí)元素就默認(rèn)為父元素的寬度幻锁，即就是100%寬凯亮，那么在100%的寬度中居中生效；但是行內(nèi)元素的寬完全是靠?jī)?nèi)容撐開哄尔，所以寬度就是內(nèi)容撐開的寬：
所以塊級(jí)是在盒子中間居中了假消，但是因?yàn)樾袃?nèi)元素的寬就是內(nèi)容寬，沒有可居中的空間岭接，所以text-align:center;就沒有作用富拗；
text-align作用在塊級(jí)元素上，這個(gè)塊級(jí)元素一般是父元素鸣戴，里面的inline啃沪、inline-block子元素會(huì)水平居中，或是文字元素會(huì)水平居中窄锅。若子元素是設(shè)置了width的block元素則不會(huì)水平居中创千。
<style>
.container {
text-align: center;
}
.box {
width: 20px;
height: 20px;
background-color: red;
}
</style>
<div class="container">
hhhh
<p>p標(biāo)簽</p>
<span>span標(biāo)簽</span>
<div class="box"></div>
<div>eeeeeeee</div>
</div>
2.inline-block碰到同類時(shí)，行高也會(huì)一起使用
<style>
body,div{
margin: 0;
padding:0;
}
.item1{
display: inline-block;
width: 100px;
height:100px;
line-height: 100px;
background-color: red;
}
.item2{
display: inline-block;
background-color: pink;
}
</style>
<div class="item1">item1</div>
<div class="item2">item2</div>
如圖所示入偷，inline-block碰到同類時(shí)追驴，行高也會(huì)一起使用。其他的padding-top和margin-top甚至都會(huì)一起使用
3.inline和inline-block會(huì)引起間距的空格
.span1 {
background-color: pink;
}
.span2 {
background-color: aqua;
}
<span class="span1">hello</span>
<span class="span2">world</span>
原因：
是因?yàn)閾Q行或者空格引起的
解決方法：
1.直接寫在一行
<span class="span1">hello</span><span class="span2">world</span>
2.在父元素上加上font-size:0;
.span1 {
font-size: 16px;
background-color: pink;
}
.span2 {
font-size: 16px;
background-color: aqua;
}
<div style="font-size: 0">
<span class="span1">hello</span>
<span class="span2">world</span>
</div>
