display最常用值为block、inline和inline-block：block独占一行且可调尺寸；inline在文本流中内联显示、宽高不可控；inline-block兼具二者特性，可并排且可设宽高。
display 最常用的三个值是 block、inline 和 inline-block，它们决定了元素在文档流中“占不占整行”以及“能不能调大小”，绝大多数布局问题都出在这三者的误用上。
什么时候该用 block？——需要独占一行且可控尺寸时
块级元素默认从新行开始，宽度撑满父容器，能设 width、height、上下 margin 和完整 padding。适合做容器、标题、段落这类结构单元。
- 常见默认
block元素：<div>、<code><p></p>、<h1></h1>～<h6></h6>、<ul></ul>、<section></section> - 典型误用：把
<span></span>改成block后没加width，结果它突然占满整行，挤垮了旁边内容 - 兼容性无忧：所有浏览器从 IE6 起就完全支持
.card {
display: block;
width: 300px;
margin: 0 auto; /* 水平居中有效 */
background: #f5f5f5;
}什么时候该用 inline？——只在文本流里“插个标签”时
行内元素不会换行，宽高由内容决定，width/height 无效；上下 margin 不起作用（推不动其他行），但左右 margin 和全部 padding 可见（只是可能视觉重叠）。
- 常见默认
inline元素：<span></span>、<a></a>、<em></em>、<strong></strong> - 典型陷阱：
padding-top看似生效，但不会抬高下一行文字——因为行内元素的垂直对齐靠vertical-align，不是 margin - 慎用于图标或按钮：想水平排列又需宽高时，
inline会失效，应选inline-block或flex
.highlight {
display: inline;
background: yellow;
padding: 2px 6px; /* 上下 padding 可见，但不撑开行高 */
margin: 5px; /* 仅左右 margin 有分隔效果 */
}
inline-block 是什么？——“能并排又能调大小”的折中解
它是 inline 和 block 的混合体：同行排列 + 完整尺寸控制。常被用来替代已淘汰的 float 布局，比如导航菜单、按钮组、商品卡片列表。
立即学习“前端免费学习笔记（深入）”；
- 幽灵间隙问题：多个
inline-block元素间会因 HTML 换行/空格产生约 4px 间隙，解决方法包括：font-size: 0父容器、移除模板空格、用margin-left: -4px抵消 - 垂直对齐默认是
baseline，常导致文字和图标不对齐，加vertical-align: middle更稳妥 - IE8+ 支持，但 IE7 需要 hack（
*display: inline; *zoom: 1），现在基本可忽略
.nav-item {
display: inline-block;
width: 120px;
height: 40px;
vertical-align: middle; /* 关键！避免底部对齐错位 */
margin-right: 10px;
}别只盯着这三个——none、flex、grid 是现代布局的刚需
display: none 是真隐藏：不渲染、不占空间、不触发重排；而 visibility: hidden 只是“看不见”，仍占位。JS 控制显隐时，优先用 none 避免布局抖动。
-
flex和grid已不是“可选项”，而是解决一维/二维布局的默认方案。它们会改变子元素的渲染行为（如flex下子元素自动变成flex-item），所以不要混用display: flex和display: inline-block在父子关系中 -
table系列值（如table-cell）仍有实用场景：纯 CSS 实现垂直居中老方案，或兼容极旧系统 -
contents是个隐形人：元素自身不生成盒子，子元素直接“浮”到父级流中——调试时容易找不到 DOM 节点，慎用于关键容器
.modal-overlay {
display: none; /* JS 切换时用这个，比 visibility 更干净 */
}
<p>.flex-container {
display: flex;
gap: 12px; /<em> 注意：gap 在 flex 中需配合 modern browsers </em>/
}真正卡住人的往往不是“不知道有这些值”，而是没意识到 display 一改，整个盒模型规则就变了——比如把 inline 元素设成 block，它立刻获得上下 margin 权限，可能意外撑开父容器高度；又比如 inline-block 的 vertical-align 默认值会让图标吊在文字下方。动手前先问一句：它现在“属于哪类流”，比死记值更重要。
