css（cascading style sheets）是一种用来控制网页样式和布局的语言。在构建网页时，我们经常需要使用css来定义元素的样式，如字体、背景色、边框等。而css中还有一个神奇的属性——display，它可以控制元素的显示方式，其中就包括隐藏。
为什么会需要隐藏元素呢？有很多场景。比如，在制作一个多个选项卡的页面时，我们可能希望只显示当前选中的选项卡内容，其他选项卡的内容则先隐藏起来。再比如，我们可能需要在页面中加入一个关闭按钮，点击后能隐藏某个元素等等。
接下来，我们将详细介绍CSS中实现元素隐藏的几种方法。
一、display属性
display是CSS中最常用的控制元素显示方式的属性。默认情况下，所有元素都是被显示的。若想隐藏元素，可以通过修改display属性来实现。以下是display属性的几种取值：
立即学习“前端免费学习笔记（深入）”；
- none
将元素隐藏，也会从文档流中移除，即不占用空间。这意味着，隐藏后的元素不再对页面布局产生影响。
示例代码：
.hide {
display: none;
}- block
将元素转换为块级元素，并显示。块级元素会独占一行，可设置宽度和高度，并可容纳其他块级元素和行内元素。
示例代码：
.show {
display: block;
}- inline
将元素转换为行内元素，并显示。行内元素不会独占一行，宽度和高度由内容决定，只能容纳其他行内元素。
示例代码：
.show {
display: inline;
}- inline-block
将元素转换为行内块级元素，并显示。行内块级元素具有块级元素可设置宽度和高度、行内元素可容纳其他行内元素的特点。
示例代码：
.show {
display: inline-block;
}二、visibility属性
visibility属性也可以用来控制元素的显示方式。与display不同的是，使用visibility隐藏元素后，元素依然占用空间，只是不再显示。以下是visibility属性的几种取值：
- visible
元素可见，并按照定位方式显示。
- hidden
元素不可见，但仍旧占用空间。不同于display：none，元素的宽度和高度依然有效。
- collapse
对于表格元素，元素的border和padding将被忽略，并使表格行看起来像是没有表格一样。
示例代码：
.hide {
visibility: hidden;
}三、opacity属性
opacity属性可以实现元素的渐渐消失效果。取值在0~1之间，表示元素的透明度。
- 0
完全透明，即该元素不可见。
- 1
完全不透明，即该元素完全可见。
- 0.5
半透明，即该元素部分可见，部分不可见。
透明度为0时，元素不仅看不见，而且不占据任何空间。但是在使用opacity隐藏元素时要注意，虽然看起来已经被隐藏了，但实际上元素还在那里。如果想要让元素不占据空间并且隐藏，还需结合display:none或者visibility:hidden等其他方法。
示例代码：
.hide {
opacity: 0;
}通过上述三种方法，即可实现元素的隐藏，从而实现个性化的设计需求。需要注意的是，对于图像等可以被下载的元素，通过隐藏来保护知识产权并不是安全的，应该借助其他技术来实现保护。
