display: none 彻底移除元素出盒模型，不生成盒、不参与布局计算；visibility: hidden 保留盒模型完整行为，仅隐藏渲染，仍占位并影响父容器尺寸。
display: none 和 visibility: hidden 在盒模型中根本不是“处理方式”的选择，而是决定元素是否参与盒模型计算的开关——前者让元素彻底退出盒模型流程，后者让它全程留在里面。
display: none 让元素完全脱离盒模型
它不是“隐藏盒子”，而是让浏览器在布局阶段就跳过该元素：不生成盒、不计算 margin/border/padding/content、不参与父容器尺寸计算。结果就是 getBoundingClientRect() 返回全 0，offsetHeight 为 0，offsetParent 为 null。
- 父容器设
display: none，子元素无论写display: block还是visibility: visible都无效 - 表格中对
<tr> 用 <code>display: none，某些浏览器下<tbody> 高度会异常塌缩 <li>服务端渲染时若初始为 <code>display: none，该元素不参与 SSR 布局计算，首屏可能漏占位 -
getBoundingClientRect()返回原始宽高与坐标，可用于动画前尺寸缓存 - 子元素设
visibility: visible可穿透显示——但要注意这可能暴露本该隐藏的内容 - 表格行（
<tr>）用 <code>visibility: hidden时，<tbody> 高度通常保持正常，但部分旧版 Safari 有兼容性问题 <h3>混用 display 和 visibility 时浏览器怎么算？</h3> <p>两者可共存，但 <code>display: none具有绝对优先级：只要display是none，visibility的值完全失效，元素既不占位也不渲染。反过来，display: block+visibility: hidden才是标准“占位隐藏”组合。- 媒体查询中避免同时定义两个属性，尤其当权重不一致时容易被覆盖
- JS 动态切换时，不要写
el.style.display = ''来“恢复”，应明确设回block/inline等具体值 - 用
getComputedStyle(el).display判断最终状态比查style.display更可靠
真正难的从来不是语法怎么写，而是每次写
display: none或visibility: hidden之前，得先问自己一句：这个元素，我到底是要从盒模型里删掉，还是让它继续站桩？漏掉这一问，后面布局抖动、尺寸读取为 0、子元素意外显示的问题，基本都绕不开。
visibility: hidden 保持完整盒模型行为
元素仍生成盒、仍参与 box-sizing 计算、仍影响父容器 height 和 scrollHeight，所有盒模型相关 API 都返回真实值。这也是它不触发重排（reflow）只触发重绘（repaint）的根本原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
