display值必须匹配元素原始类型，否则会导致布局崩、交互失效或表格整行消失；浏览器对div、span、td等元素有默认display值，强行统一设为block会破坏原有布局和语义。
直接改 display 属性就行，但别乱设值——设错会导致布局崩、交互失效、甚至表格整行消失。
display 值必须匹配元素原始类型
浏览器对每个 HTML 元素有默认 display 值：比如 div 是 block，span 是 inline，td 是 table-cell。强行统一设成 block 会出问题：
- 把
span设成display: block→ 换行、撑满父容器，破坏原有行内流布局 - 把
td设成display: none→ 整行塌陷，因为表格结构依赖table-cell的存在 - 把
ul设成display: inline→ 列表项（li）可能不显示，因li默认需在block或list-item上下文中渲染
查原始值最可靠方式：DevTools → Elements → 右键元素 → “Computed” 标签页，看 display 行。
常见 display 值的适用场景和限制
display 不是“开关”，而是“身份切换”。不同值影响盒模型、流式行为、子元素约束：
-
display: block：适合需要宽高、上下 margin、独占一行的容器；但不能用于td或th，否则表格语义丢失 -
display: inline：适合文字级包裹，但设了width/height/margin-top/margin-bottom全无效 -
display: inline-block：折中方案，可设宽高又同行排列；注意默认有空白间隙（来自 HTML 换行符），可用font-size: 0或注释删空格解决 -
display: flex/display: grid：现代布局首选，但它们会重置子元素的display行为（如flex容器里的子项自动变成flex-item，无视其原本display）
JavaScript 动态切换 display 时容易踩的坑
用 JS 控制显隐或类型切换，最容易忽略原始状态：
- 直接写
el.style.display = 'block'→ 如果元素原本是inline或table-cell，恢复后样式错乱 - 用
el.style.display = ''清空内联样式 → 结果被 CSS 文件里的.hidden { display: none; }覆盖，仍不可见 - 没同步
aria-hidden→ 屏幕阅读器仍读取已设display: none的内容，或跳过本该隐藏的区域
安全做法是提前存原始值：el.dataset.originalDisplay = getComputedStyle(el).display，之后切回用 el.style.display = el.dataset.originalDisplay。
真正难的不是写 display: flex，而是知道什么时候不该动它——尤其在表格、表单控件、第三方组件内部，硬改 display 很可能触发不可逆的渲染异常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
