display 是 CSS 布局体系里最重要的一个属性，它直接决定了 HTML 元素在浏览器中生成的盒子类型以及它在文档流中的排列方式，是各种页面结构的基础工具。
block 类型的元素会独占整行空间，默认宽度撑满父容器可用区域，可以自定义宽高以及各个方向的内外边距。页面中结构容器、标题、段落等原生元素默认使用 block 类型，常用于垂直堆叠的模块排布，是搭建页面头部、侧边栏、内容区等大结构的首选。
inline 类型的元素会跟随文本流自然排列，只占用内容本身所需要的宽度，不会强制换行。该类型不能直接设置宽高，垂直方向上的边距规则有特殊的表现形式，常用于文本片段高亮、行内链接、小图标嵌入等场景，不打断原有的流式排版逻辑。
inline-block 是两者的折中方案，既保留了 inline 元素的同行并排特性，又继承了 block 元素对宽高、边距的完整控制能力。早期的布局方案里，它经常被用来实现水平导航、按钮组、图文混排等场景，即使现在的 flex 布局已经普及了，在轻量简单的并排排布需求中仍然有很高的实用性。
实际开发的时候要注意不同元素之间的区别，不能因为混淆了它们的属性而导致布局错乱，合理地选择对应的类型可以大大减少布局实现的难度。
