如何理解display:inline-block

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第21天，点击查看活动详情

前言

对于display: inline-block；了解过CSS的人都知道，表示这个元素是一个内联块。既可以设置宽高又可以并排显示，但你知道这背后的原理吗？

display

首先，我们来回顾一下display属性：

display 属性可以将决定该元素在流式布局中的表现(块级或内联元素);

display: block；表示这个元素是块级元素，垂直显示，宽度自动撑满，可以设置宽高。

display: inline；表示这个元素是内联元素，并排显示，宽度自动收缩，不能设置宽高。

display:inline-block；表示这个元素是内联块，既可以设置宽高又可以并排显示。

回顾完display属性，我们再来认识一下元素在页面布局的表现。

‘两个盒子’

在页面布局中，其实每个元素都两个盒子： 外在盒子和内在盒子。

外在盒子：负责元素是可以一行显示，还是只能换行显示；

内在盒子：负责宽高和内容呈现，也叫容器盒子；

重新理解display

现在我们结合元素在在页面布局中的表现，重新理解一下display属性：

display: block；的元素的盒子实际由外在的“块级盒子” 和内在的“块级容器盒子”组成；

display:inline-block；的元素则由外在的“内联盒子”和内 在的“块级容器盒子”组成；

display:inline；的元素则内外均是“内联盒子”；

所以这就解释了display:inline-block；的元素既能和图文一行显示， 又能直接设置宽高了。

因为有两个盒子，外面的盒子是 inline，里面的盒子是 block。

结语

本文到此结束

如果大家还有什么其他想法，欢迎在评论区交流！