转https://blog.csdn.net/duByann/article/details/154286364
1 display 属性简介
display 属性是 CSS 中最基础也是最重要的属性之一，它决定了一个元素如何显示以及如何参与布局。
它控制着元素的内部显示类型和外部显示类型
外部显示类型(Outer Display Type)：元素本身如何作为父元素的子元素参与外部布局（例如，是块级盒子、行内盒子还是其他）。
内部显示类型 (Inner Display Type)：元素内部的子元素如何布局（例如，是块级布局、行内布局还是网格布局）。
2 常用 display 值总结表
3 外部显示类型
这些值主要控制元素在正常文档流中的行为
3.1 block (块级)
行为：元素前后会换行，独占一行（或尽可能宽）。
宽度：默认占满父容器的宽度。
高度：由内容或 height 属性决定。
可以设置：width, height, margin, padding 等所有盒模型属性。
常见元素：< div > , < p > , < h1 >~< h6 > , < ul > , < li > , < section > , < header > 等。
3.2 inline (行内)
行为：元素在一行内排列，不换行。多个行内元素会并排显示，直到一行放不下才换行。
宽度和高度：由内容决定，不能通过 width 和 height 属性设置。
垂直方向的 margin 和 padding：可以设置，但不会影响其他元素的布局（可能会覆盖或被覆盖）。
水平方向的 margin 和 padding：可以正常影响布局。
常见元素：< span > , < a > , < strong > , < em > , < img >(注意：< img > 是 inline-block)等。
3.3 inline-block (行内块级)
行为：结合了 block 和 inline 的特性。
外部：像行内元素一样在一行内排列。
内部：像块级元素一样，可以设置 width, height, margin, padding 等所有盒模型属性。
常见用途：创建水平排列的按钮、导航菜单项、需要设置宽高的小图标等。
注意：元素之间可能会有空白间隙（由 HTML 中的空格、换行符引起），可通过设置父元素 font-size: 0 或移除 HTML 中的空格来解决。
3.4 none (无)
行为：元素完全从文档流中移除，不占据任何空间，视觉上不可见。
与 visibility: hidden 的区别：
display: none：元素消失，不占空间。
visibility: hidden：元素不可见，但仍然占据空间。
用途：隐藏元素，常用于响应式设计或通过 JavaScript 动态控制显示/隐藏。
4 内部显示类型
这些值定义了元素内部的布局上下文，即它的子元素将如何被布局。
4.1 flex (弹性盒子布局)
作用：创建一个弹性容器 (Flex Container)，其直接子元素（弹性项目）将按照弹性盒子模型进行布局。
特点：非常适合一维布局（单行或单列），能轻松实现对齐、分布空间、处理不同尺寸的项目。
关键属性：flex-direction, justify-content, align-items, flex-wrap, flex-grow, flex-shrink, flex-basis。
4.2 grid (网格布局)
作用：创建一个网格容器 (Grid Container)，其直接子元素（网格项目）将按照二维网格（行和列）进行布局。
特点：强大的二维布局系统，可以精确控制行、列、轨道大小、项目放置位置等。
关键属性：grid-template-columns, grid-template-rows, grid-gap (或 gap), grid-template-areas, grid-column, grid-row。
4.3 flow-root (块级格式化上下文根)
作用：创建一个块级盒子，同时创建一个新的块级格式化上下文 (BFC)。
用途：主要用于清除浮动。当一个容器设置了 display: flow-root，它可以包含其内部的浮动元素，防止浮动元素溢出到容器外影响其他布局。
传统清除浮动方法：使用 overflow: hidden 或伪元素 ::after { content: “”; display: block; clear: both; }。
现代推荐方法：display: flow-root 更语义化、更安全。
5 其他类型
5.1 list-item
表现为一个列表项。它包含一个标记框 (marker box)（如圆点、数字）和一个主盒 (principal box)。
主盒的 display 类型通常是 block，所以列表项会独占一行。
常见元素：< li > 元素的默认值
5.2 contents
行为：该元素本身不产生任何盒子，但它的子元素会正常显示，就好像它们直接位于该元素的父元素中一样。
用途：主要用于可访问性或简化特定布局。例如，一个 < div > 包裹了几个标题，设置 display: contents 后，这些标题会直接成为父容器的子元素，可能有助于屏幕阅读器理解。
注意：该元素的 background, border 等样式会丢失，因为它不产生盒子。
5.3 initial
将 display 属性设置为初始值。对于大多数元素，初始值是 inline
5.4 inherit
继承父元素的 display 值
5.5 unset
如果该属性是继承属性，则行为同 inherit；如果不是，则行为同 initial。对于 display，通常等同于 initial。
6 选择指南
默认行为：大多数情况下，让元素保持其默认的 display 值（如 div 为 block，span 为 inline）是最好的起点。
布局优先：对于复杂的布局，优先考虑 flex 和 grid。
一维布局（一行或一列）：用 flex。
二维布局（网格）：用 grid。
避免滥用 inline-block：虽然 inline-block 曾经是创建水平布局的主要方式，但现在 flex 是更强大、更灵活的替代方案。inline-block 仅在需要精确控制单个元素宽高且希望它行内排列时使用。
清除浮动：使用 display: flow-root 或 overflow: hidden（如果内容不会被裁剪）来创建 BFC，而不是使用 float 来进行布局。
隐藏元素：根据需求选择 display: none（完全移除）或 visibility: hidden（隐藏但占位）。
语义化：尽量使用语义化的 HTML 元素，而不是通过 display 去模拟。
