每个人都可以，
拥有SSL证书

刚做页面那阵子，我觉得隐藏个 div 无非就加个 display: none 完事。后来有个布局怎么调都感觉下面莫名多出一块空白，查了半天才发现是之前用 visibility: hidden 藏起来的元素还在那儿占着坑。这两个属性都能让 div 从视觉上消失，但背后的行为差别不小，线上跑起来问题就全出来了。

先看 CSS 怎么搞。最简单的一行代码：给个 .hidden 类，里面写 display: none。只要给 div 挂上这个类，元素就直接从页面上蒸发，文档流里也不留痕迹，后面兄弟元素会顶上来。如果你只是想让它看不见但位置还留着，比如一个占位区或者后面要用 JS 控制淡入淡出，那就换成 visibility: hidden。

这时候元素还是那个元素，宽高都还在，只是变成透明人，不会把周围元素给挤乱。

HTML 里面可以这么测：放两个 div，第一个 div 加 class="hidden"，第二个 div 加 class="invisible"。然后引个 hide_div.css，里面写：

div.hidden { display: none; } div.invisible { visibility: hidden; }

打开页面能看到，用 display: none 那个 div 完全不占地方，仿佛没写过。用 visibility: hidden 那个 div 地方照占，就是一片空白，跟被施了隐身咒一样。

动态控制的话，JavaScript 直接改 style 就好。比如想把类名是 .hidden 的元素藏起来，就 document.querySelector('.hidden').style.display = 'none';。

想用 visibility 那套，就改成 .style.visibility = 'hidden';。这种动态玩法很适合用户点了某个按钮再决定显隐，或者根据接口返回的状态切换。

这两种方式各有利弊。display: none 的好处是干净，元素完全移出文档流，适合那种需要整个区域彻底收起来的需求，像 tab 切换里非当前面板。但坏处也很明显，一旦设成 none，元素原本的显示类型（block、inline-block、flex 什么的）就丢了，想再把它放回来，只能靠 JS 把 display 改回具体值，如果忘了之前是啥，容易把布局搞崩。visibility: hidden 就没这问题，它不改变 display 属性，也从始至终占着地儿，改回来就是 visibility: visible，不用关心原来是什么盒模型。

缺点就是占着空间可能会让页面看上去有莫名空白，而且如果那个区域里还有可交互元素，虽然看不见但依然能点到，不注意容易踩坑。

说到底，用哪个就看需不需要它占位。需要维持骨架避免整体重排就选 visibility，需要空间完全释放、不给用户留痕就选 display。具体场景里组合着用，能少踩很多坑。