笔者做web前端已经做了很长时间了，常用的display属性就是inline、block和inline-block，对于他们的特性和区别有一个大概的了解，但是并不全面。今天笔者写这篇文章再来重新认识一下这三者和这三者之间的区别，再对平常使用过程中常常碰到的问题做个回顾和总结。
特性
inline：
- 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行
- 不能更改元素的height，width的值，大小由内容撑开
- 可以使用padding，margin的left和right产生边距效果，但是top和bottom就不行
block：
- 使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度
- 能够改变元素的height，width的值
- 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果
inline-block：
用通俗的话讲，inline-block就是不独占一行的块级元素
- 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行
- 能够改变元素的height，width的值
- 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果
常见问题
1，如何将内联元素变成块元素
-
第一种：直接修改display为 block
将内联元素的display属性设置为block之后，内联元素就会以块级元素的方式进行展示。独占一行，可以设置宽高等… -
第二种：对inline元素设置float
如下图，当我们将world标签设置float: right时，它的width和height设置就都起作用了
![在这里插入图片描述]()
-
第三种：对inline元素设置position:absolute/fixed
既然设置float能够使inline元素变为block，那position:absolute/fixed是否也可以呢，答案是肯定的
![在这里插入图片描述]()
![在这里插入图片描述]()
-
第四种：对inline元素的父元素设置display: flex
我发现，当我们设置inline元素的父元素为flex时，此时inline元素也可以设置宽高了。（关于flex的详细介绍，可以看笔者的另外一篇文章：css —— Flex布局详解）
![在这里插入图片描述]()
![在这里插入图片描述]()
2，inline-block布局 vs 浮动布局，怎么选择
相同点：
- 能够达成一致的逐行排列的效果
![在这里插入图片描述]()
不同点：
通过上图的对比发现，虽然他们都是逐行排列，排不下了自动换行，但是区别也是很明显的
- float会使得父元素高度坍塌，需要将父元素设置overflow:hidden闭合浮动
- 从图中可以看出，float元素会尽量往上靠，而inline-block元素会尽量往左靠
- inline-block元素之间会差生小的空隙，而float元素是没有的。这个缝隙是如何产生的以及如何消除，我们看下个问题。
综上，如果是需要逐行从行头开始排列元素，就使用inline-block，如果需要文字环绕的效果就是用float。
3，inline-block产生的缝隙问题
缝隙产生原因：
这个问题产生的原因是换行引起的，因为我们写标签时通常会在标签结束符后顺手打个回车，在下面一行继续写标签，而回车会产生回车符，回车符相当于空白符。如下图所示：
消除缝隙：
- 既然缝隙是回车产生的，那么我们只要将所有的span标签都写在一行，问题自然就解决了，但是在编辑器上，一行过长，编辑起来就十分的不方便
- 我们将父元素的font-size设置为0，然后再将span的font-size设置成我们需要的值，这样空白地方就消失了，如下：
![在这里插入图片描述]()
![在这里插入图片描述]()
贴出以上示例的代码，供大家尝试：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>change-to-flex</title>
<style>
body {
margin: 0;
}
.border {
margin: 60px;
width: 200px;
border: 2px solid blue;
font-size: 0;
}
.item {
border: 1px solid green;
display: inline-block;
font-size: 14px;
}
</style>
</head>
<body>
<div class="border">
<span class="item">hello</span> <span class="item" style="height:40px;">world</span>
<span class="item">，</span>
<span class="item">jia</span>
<span class="item">you</span>
<span class="item">wuhan</span>
</div>
</body>
</html>
—————————————————————————
参考文章：
CSS—display详解（作者：墨VS雪）