display 的取值取决于布局意图：block 和 inline 用于基础文档流，inline-block 是过渡方案，flex 和 grid 才是现代布局主力，常嵌套使用；需管理子项时应优先选 flex 或 grid，而非强转 block/inline。
display 的取值不是“选哪个更高级”，而是“哪个匹配当前布局意图”。block 和 inline 解决基础文档流问题，inline-block 是过渡方案，flex 和 grid 才是现代布局的主力——但它们不互斥，常嵌套使用。
什么时候必须用 block 或 inline
当元素需要严格遵循 HTML 默认流行为，且不涉及子元素排列控制时：block 用于结构容器（如卡片外层、表单区块），inline 用于文本内嵌标记（如 <span></span> 包裹关键词、<a></a> 链接）。二者都无子项布局能力，也不接受 justify-content 等 flex/grid 属性。
常见误用：display: block 套在按钮里强行撑宽——其实该用 width + inline-block 或直接上 flex 容器；display: inline 给 <div> 加宽高——无效，浏览器会忽略 <code>width/height 和垂直方向的 margin。
-
block元素默认宽度占满父容器，margin: auto水平居中有效，垂直无效 -
inline元素的padding会渲染，但不会推开相邻行内元素（只影响背景和边框视觉） - 不要为了“让文字换行”给
<span></span>加block——改用<p></p>或<div> 更语义正确 <h3> <code>inline-block的真实适用场景和坑它唯一不可替代的价值：在纯文档流中实现「并排 + 可设尺寸 + 不脱离流」。典型如导航菜单项、图标按钮组、评分星星序列。
立即学习“前端免费学习笔记（深入）”；
DeepBI DHTML 页面生成器下载生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
但必须处理两个硬伤：
vertical-align默认是baseline，导致元素底部对不齐；HTML 中换行符或空格会被渲染成约 4px 的空白间隙。- 对齐统一加
vertical-align: middle或top，别依赖默认值 - 消除间隙可选：父容器设
font-size: 0，子元素重置font-size；或移除模板中元素间的换行/空格；或用margin-left: -4px负偏移（不推荐） - 它不解决子项等分布局——
flex: 1或grid-template-columns: repeat(3, 1fr)才是正解
flex和grid别混用错层级flex是一维布局模型，只管“一行或一列”内的主轴/交叉轴对齐与空间分配；grid是二维模型，能同时定义行、列、区域和重叠。二者不能互相替代，但可以共存：比如整个页面用grid划分 header/main/footer，而 header 内部用flex排 logo + nav + search。- 别把
grid当flex用：想让三个按钮水平等宽？display: flex+flex: 1更轻量；非要用grid就得写grid-template-columns: 1fr 1fr 1fr -
flex容器内子项无法跨行（除非flex-wrap: wrap），grid子项可用grid-row/grid-column跨任意行列 -
grid的auto-fit+minmax()能响应式生成列数，flex需配合媒体查询或 JS
display: none的隐藏逻辑比想象中重它不只是“看不见”，而是让元素彻底退出渲染树：不占空间、不触发重排、子元素全部失效、屏幕阅读器跳过、JS 中
getBoundingClientRect()返回全零值。对比
visibility: hidden（仍占位）、opacity: 0（仍可交互、仍触发布局计算），display: none是开销最低的隐藏方式，但也最“粗暴”。- 动画切换时别直接切
display——会导致闪动，先用opacity+transition，再用setTimeout切display - 表单中用
display: none隐藏字段，该字段仍会提交；要真正排除就用disabled或移除name属性 - 服务端渲染（SSR）中慎用，可能造成水合 mismatch，尤其搭配 React/Vue 的条件渲染
真正难的不是记住每个值的定义，而是判断「这个容器是否需要管理子项」——需要，就跳过
block/inline，直奔flex或grid；不需要，就用最轻量的语义化标签，而不是靠display强转。 - 对齐统一加
