如何使用CSS让div不被渲染而非仅设置为不可见？

实现方法 #

给目标div设置CSS属性 display: none 即可。
设置该属性后，元素会完全脱离正常文档流，既不会渲染任何可见内容，也不会占用任何页面布局空间，表现上和该div从未存在完全一致。

不同隐藏方案的区别 #

你提到的设置不可见但仍干扰布局的方案，通常是用了visibility: hidden或者opacity: 0，三者的核心差异如下：

• display: none：完全不参与页面布局，无视觉内容，无法触发绑定的点击等交互事件
• visibility: hidden：元素不可见，但仍保留原有宽高等布局占位，可触发绑定的交互事件
• opacity: 0：元素透明度为0，视觉上不可见，保留原有布局占位，可触发绑定的交互事件

另外你也可以直接给div添加原生HTML的hidden属性，默认效果和display: none完全等价。

内容的提问来源于stack exchange，提问作者Albert Hoffman