CSS的display属性详解：常见值及inline与block的区别
在CSS中，display属性是控制页面布局的最核心属性之一。它决定了元素在文档流中的显示类型，直接影响到元素的尺寸、位置以及与其他元素的排列关系。本文将详细盘点display属性的常见值，并深入对比inline与block的核心区别。
一、CSS的display属性有哪些常见值？
随着CSS规范的不断发展，display属性的值越来越丰富，主要可以分为以下几大类：
1. 基础显示类型
block：将元素显示为块级元素。
inline：将元素显示为行内元素。
inline-block：行内块元素，结合了行内元素与块级元素的特点。
2. 隐藏类型
none：隐藏元素，且不占据任何物理空间（与
visibility: hidden不同，后者仍占据空间）。
3. 弹性布局类型
flex：将元素设置为弹性容器，其子元素成为弹性项目。
inline-flex：行内弹性容器，对外表现为行内元素，对内表现为弹性容器。
4. 网格布局类型
grid：将元素设置为网格容器。
inline-grid：行内网格容器，对外表现为行内元素，对内表现为网格容器。
5. 表格布局类型
table：作为块级表格显示。
inline-table：作为行内表格显示。
以及
table-row、table-cell、table-column等对应的表格内部结构元素。
6. 列表类型
list-item：将元素显示为列表项，通常会带有项目符号，类似
<li>标签的默认样式。
二、inline和block的核心区别
inline（行内元素）和block（块级元素）是CSS布局中最基础的两个概念，它们在排版规则上有本质的区别：
1. 独占一行 vs. 共享一行
block：块级元素会独占一行，其后的元素会自动换行显示。即使宽度不足以占满整行，块级元素依然会占据一整行的空间。
inline：行内元素不会独占一行，多个行内元素会按照从左到右的顺序排列在同一行中，直到一行排满才会换行。
2. 宽高设置的有效性
block：块级元素的宽度（
width）和高度（height）是有效的。如果不设置宽度，块级元素的默认宽度是父容器的100%。inline：行内元素的宽度和高度设置是无效的。其宽度和高度完全由其内部的内容（文字、图片等）撑开。
3. 内外边距的表现
block：块级元素的
margin和padding四个方向设置均有效，且上下外边距会发生合并（Margin Collapse）。inline：行内元素的左右
margin和padding有效；但上下margin无效，上下padding虽然可以设置，但不会影响文档流（即不会把上下相邻元素挤开，可能会产生视觉上的重叠）。
4. 包含标签的规则
block：块级元素可以包含其他块级元素和行内元素（但需注意
<p>标签不能包含块级元素等特例）。inline：行内元素一般只能包含文本和其他行内元素，不能包含块级元素。
三、代码示例对比
下面通过一段代码，直观地展示block与inline在宽高和排列上的区别：
<!-- 块级元素演示 --> <div style="width: 200px; height: 50px; background-color: lightblue; margin-bottom: 10px;"> 我是块级元素1（设置了宽高） </div> <div style="background-color: lightcoral;"> 我是块级元素2（未设置宽高，默认撑满父容器） </div> <br> <!-- 行内元素演示 --> <span style="width: 200px; height: 50px; background-color: lightgreen; margin-top: 50px;"> 我是行内元素1（宽高和上下margin无效） </span> <span style="background-color: lightsalmon;"> 我是行内元素2 </span>
在上述示例中，<div>作为块级元素，各自独占一行，且可以成功应用宽高；而<span>作为行内元素，并排显示，且为其设置的width、height和margin-top均未生效。
四、折中方案：inline-block
在实际开发中，如果我们既希望元素像行内元素一样并排显示，又需要为其设置宽高和上下边距，可以使用inline-block。它对外表现为行内元素（共享一行），对内表现为块级元素（可设宽高、内外边距均有效）。
更多布局演示与实战案例，您可以访问：www.ipipp.com 查看详细的前端布局指南。
总结
理解display属性的各个值，尤其是inline和block的区别，是掌握CSS布局的基石。现代布局中，虽然flex和grid大行其道，但底层依然离不开对文档流和元素显示类型的基本认知。根据实际排版需求，灵活切换display属性，才能构建出稳健且易于维护的页面结构。