1. **display:none**
display 属性用于定义一个元素应如何显示或不显示。当设置为 "none" 时，则该元素及其中的所有内容（子元素）都将被完全从文档流移除，并且不再占用任何布局空间。简而言之：
css
.hidden-element {
display: none;
}
使用此属性后，不仅视觉上看不见相应元素，而且浏览器也不会为其预留位置和计算其对周围元素的影响。对于SEO优化来说，搜索引擎通常不会抓取这类设为“display:none”的内容。
2. **visibility:hidden**
visibility 属性控制了元素是否可见，但不同于 “display”，它并不会影响页面布局。若将其值设定为 "hidden"：
css
.invisible-element {
visibility: hidden;
}
此时虽然用户无法看到这个元素的内容，但它依然占据着正常的空间，也就是说其他DOM元素会围绕它的原本占位进行排列。同时需要注意的是，即使设置了 `visibility:hidden` 的元素，在JavaScript操作或者打印预览状态下可能仍会被处理或展示出来。
3. **opacity:0 或者 rgba(透明度)**
opacity 是另一个可以用来达到隐形效果的方法，通过调整元素的不透明程度来使其看似消失于界面之中：
css
.transparent-element{
opacity: 0; /* 将元素变得全透明 */
}
OR
.semi-transparent-background {
background-color: rgba(0, 0, 0, 0); /* 第四个参数代表alpha通道/透明度 */
}
虽然看上去达到了隐藏的效果，但实际上这些元素仍然存在于 DOM 树上并参与布局渲染，只是单纯的不可见而已。
4. **使用CSS Flexbox/Grid特性隐藏多余项目**
在Flex容器或是Grid容器中，可以通过 `flex-grow`, `overflow` 等相关样式配合巧妙地让某个项目的宽度高度变为零从而达成隐匿的目的：
css
.parent-container {
display:flex;
}
.hide-item {
flex-basis: 0;
width: 0;
overflow: hidden;
}
总结起来，“display:none”适用于彻底删除元素及其所占区域；而“visibility:hidden”则保留原元素的位置而不展现内容；至于Opacity则是改变可视性的同时保持原有的物理尺寸存在感。开发者可以根据实际应用场景选择最合适的方案以满足不同层次的需求。