【css】举例说明display：inline、block、inline-block的区别

Question

RT
内联元素，块元素，行内块元素到底有啥差别嘞？

Answer 1

关于这三者的区别，可以看看博客的详细解答
https://www.cnblogs.com/jdons...

这里我用个简单的列表说明一下

<ul>
  <li>问答</li>
  <li>头条</li>
  <li>专栏</li>
  <li>讲堂</li>
  <li>发现</li>
</ul>

这样一个列表在浏览器中显示的效果如下，li作为块级元素，默认是 display:block，每一个li都会换行

可是我不想他竖着下来，我想让这个列表横向显示,这时候就可以给每个li加上 display:inline , 将li元素转换为行内元素

<style>

ul li{
  display: inline;
}

</style>

<ul>
  <li>问答</li>
  <li>头条</li>
  <li>专栏</li>
  <li>讲堂</li>
  <li>发现</li>
</ul>

此时浏览器显示效果如下：

现在列表还不够好，他们之间的间隙太小，我想给每一个li设置一个宽度，给他加一个width:50px，问题来了，无论你设置多宽，它都不会生效，因为inline作为行内元素，没有width、height等属性，那怎么办，于是有了
display:inline-block，这个属性就解决了宽度设置不了的问题，同时保持li元素依然是横向排列。

<style>

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

</style>

<ul>
  <li>问答</li>
  <li>头条</li>
  <li>专栏</li>
  <li>讲堂</li>
  <li>发现</li>
</ul>

总结：
display：inline 使元素成为行内元素
display：block 使元素成为块级元素
display：inline-block 使元素保留行业元素布局，同时拥有块级元素的css属性（如width，height）

Answer 2

这种答案网上一搜一大堆

Answer 3

内联元素不换行，内联元素的宽度高度由元素内部的结构撑开。

比如用"span"标签，给该标签定义宽高，最后都会失效。它的宽高由内部的结构撑开。

块级元素自带换行效果，可以定义宽高。

"<div>"就是一个块级元素。

行内块元素顾名思义..就是不换行的块级元素..可以定义宽高且不换行。

Answer 4

行元素没有宽度，可以一排放好几个
块元素有宽度，默认100%，正常排列一排只能放一个
内联快既能一排放好几个，每个还能给宽度