display切换需依场景选值：none/block触发重排，适合整块隐藏；inline-block解决行内布局但有空白间隙；flex/grid属布局重构，非简单切换；display不支持动画，应配合visibility或max-height实现过渡效果。
直接用 display 切换显示模式，核心就是改值——但不同取值行为差异极大，不能无脑替换。
display: none 和 display: block 的切换逻辑
这是最常写的显隐控制，但要注意：它不是“开关”，而是“移除/插入渲染树”。display: none 时元素彻底消失，不占位、不响应事件、屏幕阅读器跳过；切回 block 会触发重排（reflow），可能造成页面抖动。
- 适合场景：临时隐藏整块区域（如侧边栏收起、表单步骤切换）
- 不适合场景：需要过渡动画、或需保留焦点/键盘导航的控件（比如下拉菜单）
- 常见错误：写成
element.style.display = ''—— 这不会恢复原值，而是清空内联样式，可能继承到inline或其他意外值 - 安全写法：存原始值，或用 class 控制：
element.classList.toggle('hidden')，CSS 里定义.hidden { display: none; }
display: inline-block 是行内布局的实用解
当你要让几个 div 横着排、又想设宽高和上下 margin，inline-block 是比浮动更干净的选择。但它自带“空白间隙”——源于 HTML 中换行符和空格被解析为文本节点。
- 典型现象：多个
display: inline-block元素间有 4px 左右缝隙 - 解决方式一：父容器设
font-size: 0，子元素再单独设字体大小 - 解决方式二：删掉 HTML 中元素间的换行和空格（可读性差，不推荐）
- 注意：不要对
img或button等原生inline-block元素重复设该值，冗余
display: flex / grid 不是“切换”，而是布局重构
把 display: block 改成 flex，不只是显示模式变化，是整套布局模型切换——子元素的 float、vertical-align 失效，margin 行为也不同（比如自动居中变成 justify-content: center）。
- 别在已有复杂浮动布局上临时加
display: flex，容易崩 -
flex容器默认主轴是水平，grid默认是块方向，方向错会导致内容堆叠或溢出 - 兼容性提醒：IE10–IE11 对
flex有前缀要求（display: -ms-flexbox），grid在 IE 中完全不可用
真正难的不是写对 display 值，而是判断这个元素是否该由 display 来控制——比如模态框遮罩层用 visibility: hidden 更合适，导航菜单展开用 max-height + overflow 配合 transition 才能平滑动画。display 只管“要不要画”，不管“怎么渐变”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
