CSS display 属性完全手册，20+ 属性值详解与实战应用

一、为什么 display 属性是布局核心？

display 属性直接控制元素的渲染方式，它决定了元素是作为块级元素、内联元素还是其他特殊类型显示。这个属性的不同取值不仅影响元素自身的展示特性，还会改变子元素的排列方式，进而影响整个页面的视觉呈现。

1.1 基础显示类型

▶ block（块级元素）

display: block; 的元素会独占一行，典型代表如 <div> 和 <p>。
特性：可设置宽高、自动换行、默认宽度 100%

▶ inline（内联元素）

display: inline; 的元素水平排列，常见于 <span> 和文本标签。
特性：不可设置宽高、仅接受水平 margin/padding

▶ inline-block（行内块元素）

display: inline-block; 结合两者特性，适合制作水平菜单按钮：

.button {
  display: inline-block;
  width: 120px;
  padding: 10px;
}

1.2 隐藏元素的两种方式

▶ none（完全隐藏）
元素不占据空间，常用于响应式布局的移动端隐藏：
display: none;

▶ visibility: hidden（保留占位）
隐藏元素但保留布局空间，适用于需要保留位置的场景。

二、现代布局系统核心

2.1 Flex 弹性盒子

display: flex; 创建弹性容器，实现自适应布局：

.nav {
  display: flex;
  justify-content: space-between;
}

衍生值：
• inline-flex（行内弹性容器）

2.2 Grid 网格布局

display: grid; 构建二维布局系统：

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

衍生值：
• inline-grid（行内网格容器）

三、特殊布局类型

3.1 表格布局

通过 display 模拟表格结构：

.table {
  display: table;
}
.row { display: table-row; }
.cell { display: table-cell; }

3.2 列表布局

display: list-item; 让元素表现类似 <li>，可配合计数器使用。

四、高级属性值解析

4.1 contents（元素溶解）

元素自身不生成框体，子元素直接继承祖父元素的布局上下文。

4.2 flow-root（BFC 创建）

创建新的块级格式化上下文，解决浮动塌陷问题。

4.3 实验性属性

▶ run-in（动态显示类型）
根据上下文自动切换 block/inline 显示模式（注意浏览器兼容性）。

五、实战应用场景

5.1 响应式导航栏

@media (max-width: 768px) {
  .menu {
    display: none;
  }
  .mobile-menu {
    display: block;
  }
}

5.2 网格图片墙

.photo-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

5.3 表单元素对齐

.form-group {
  display: inline-block;
  vertical-align: middle;
}

六、浏览器兼容性指南

结语：
从基础显示模式到现代布局系统，display 属性始终是 CSS 布局的核心武器。建议开发者在掌握传统布局方式的同时，重点学习 Flex 和 Grid 布局，并持续关注 CSS 新特性的发展动态。

（作者：江城开朗的豌豆 | 前端技术交流群：906392632）