【css】舉例說明display：inline、block、inline-block的區(qū)別

關(guān)于這三者的區(qū)別，可以看看博客的詳細(xì)解答
https://www.cnblogs.com/jdons...

這里我用個簡單的列表說明一下

<ul>
  <li>問答</li>
  <li>頭條</li>
  <li>專欄</li>
  <li>講堂</li>
  <li>發(fā)現(xiàn)</li>
</ul>

這樣一個列表在瀏覽器中顯示的效果如下，li作為塊級元素，默認(rèn)是 display:block，每一個li都會換行

可是我不想他豎著下來，我想讓這個列表橫向顯示,這時候就可以給每個li加上 display:inline , 將li元素轉(zhuǎn)換為行內(nèi)元素

<style>

ul li{
  display: inline;
}

</style>

<ul>
  <li>問答</li>
  <li>頭條</li>
  <li>專欄</li>
  <li>講堂</li>
  <li>發(fā)現(xiàn)</li>
</ul>

此時瀏覽器顯示效果如下：

現(xiàn)在列表還不夠好，他們之間的間隙太小，我想給每一個li設(shè)置一個寬度，給他加一個width:50px，問題來了，無論你設(shè)置多寬，它都不會生效，因?yàn)閕nline作為行內(nèi)元素，沒有width、height等屬性，那怎么辦，于是有了
display:inline-block，這個屬性就解決了寬度設(shè)置不了的問題，同時保持li元素依然是橫向排列。

<style>

ul li{
  display: inline-block;
  width: 50px;
}

</style>

<ul>
  <li>問答</li>
  <li>頭條</li>
  <li>專欄</li>
  <li>講堂</li>
  <li>發(fā)現(xiàn)</li>
</ul>

總結(jié)：
display：inline 使元素成為行內(nèi)元素
display：block 使元素成為塊級元素
display：inline-block 使元素保留行業(yè)元素布局，同時擁有塊級元素的css屬性（如width，height）

內(nèi)聯(lián)元素不換行，內(nèi)聯(lián)元素的寬度高度由元素內(nèi)部的結(jié)構(gòu)撐開。

比如用"span"標(biāo)簽，給該標(biāo)簽定義寬高，最后都會失效。它的寬高由內(nèi)部的結(jié)構(gòu)撐開。

塊級元素自帶換行效果，可以定義寬高。

"<div>"就是一個塊級元素。

行內(nèi)塊元素顧名思義..就是不換行的塊級元素..可以定義寬高且不換行。

行元素沒有寬度，可以一排放好幾個
塊元素有寬度，默認(rèn)100%，正常排列一排只能放一個
內(nèi)聯(lián)快既能一排放好幾個，每個還能給寬度

這種答案網(wǎng)上一搜一大堆