display: table 切换至表格布局引擎，width 仅作最小宽度提示，padding/border 影响列宽重算，margin 无效，需配合 table-row/table-cell 结构，box-sizing: border-box 无效，table-layout: fixed 可控列宽，但语义与响应式受限。
display:table 触发表格布局算法，不再走标准盒模型流程
设置 display: table 后，元素不再按 block 或 inline 的盒模型规则计算尺寸和位置，而是启用浏览器内置的表格布局引擎——它有自己的宽度分配逻辑、行高对齐规则和单元格收缩/拉伸行为。这不是“盒模型失效”，而是切换到了另一套独立的渲染路径。
- 内容宽度不再由
width直接决定：表格容器会根据子项（如display: table-cell）的内容自动计算列宽，width仅作为最小宽度提示（min-width效果），而非强制约束 -
padding和border仍生效，但会影响列宽重算：比如两个table-cell并排时，任一单元格增加padding，整列可能变宽，相邻列会被压缩 -
margin完全无效：表格元素不支持外边距，margin声明会被浏览器忽略（不报错也不渲染）
子元素必须配合 table-row / table-cell 才能形成完整表格结构
单独给一个 div 设 display: table 只是声明“我当表格容器”，但若子元素仍是 display: block，它们不会自动变成行或单元格——浏览器会隐式插入匿名表格盒子，导致不可预测的嵌套和尺寸抖动。
- 正确结构应为：
display: table→display: table-row→display: table-cell - 漏掉
table-row层？浏览器会补一个匿名table-row盒子，但该盒子无法设置样式，也无法用 CSS 选中 - 直接让子元素设
display: table-cell而父级没设table？此时浏览器会把父级当成匿名表格容器，可能破坏原有布局上下文（比如 flex 容器里混用 table-cell 就容易出问题）
table 布局下 box-sizing 行为受限，content-box 是唯一可靠模式
box-sizing: border-box 对 display: table 及其子项基本无效——表格算法优先按内容撑开单元格，再分配剩余空间，width + padding + border 的总和不会被强制约束在设定值内。
- 即使写了
box-sizing: border-box，table-cell的实际宽度仍可能超出你写的width - 想稳定控制列宽？优先用
table-layout: fixed配合显式width，此时列宽由第一行单元格定义，后续行内容溢出也不会撑宽列 - 避免在
table-cell上依赖max-width：它只限制内容区域，不影响表格整体列宽重算
响应式与可访问性隐患常被忽略
表格布局在小屏幕下极易横向溢出，且语义上暗示“数据关系”，用它做纯视觉布局（比如页眉、卡片网格）会误导屏幕阅读器，也增加媒体查询调试成本。
- 横向滚动不是 bug，是表格算法的自然结果：内容多 → 列宽增 → 容器超宽 → 滚动出现
- 没有
display: table的等效替代方案？现代布局中，display: grid或flex配合gap和minmax()更可控、更语义清晰 - 真要用 table 做布局？至少确保加
role="presentation"告诉辅助技术“这纯粹是视觉排版”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
