CSS显示隐藏元素的方法有很多，这里我们介绍三种常用的方法：使用`display`属性、使用`visibility`属性和使用JavaScript。
1. 使用`display`属性
`display`属性用于控制元素的显示方式，可以设置为以下值：
- `block`:元素作为块级元素显示，占据一整行。
- `inline`:元素作为行内元素显示，不占据整行。
- `inline-block`:元素作为行内块级元素显示，既不是块级元素也不是行内元素，但具有行内元素的特点。
- `none`:元素不显示。
要显示一个元素，可以将`display`属性设置为`block`,要隐藏一个元素，可以将`display`属性设置为`none`。
/* 显示元素 */
.element {
display: block;
}
/* 隐藏元素 */
.element {
display: none;
}
2. 使用`visibility`属性
`visibility`属性用于控制元素的可见性，可以设置为以下值：
- `visible`:元素可见。
- `hidden`:元素不可见，但仍占用空间。
要显示一个元素，可以将`visibility`属性设置为`visible`,要隐藏一个元素，可以将`visibility`属性设置为`hidden`。
/* 显示元素 */
.element {
visibility: visible;
}
/* 隐藏元素 */
.element {
visibility: hidden;
}
需要注意的是，使用`visibility`属性隐藏的元素仍然会占用页面空间，只是不可见而已，这意味着在计算页面布局时，这些元素仍然会被考虑，如果需要彻底移除某个元素，建议使用第一种方法(将`display`属性设置为`none`)。
3. 使用JavaScript
除了CSS之外，还可以使用JavaScript来控制元素的显示和隐藏。
// 显示元素
document.getElementById('element').style.display = 'block';
// 隐藏元素
document.getElementById('element').style.display = 'none';
这种方法的优点是可以在运行时动态地改变元素的显示状态，而不需要修改CSS样式表，这种方法需要编写额外的JavaScript代码，可能会增加页面的复杂性。
相关问题与解答：
1. 如何同时显示和隐藏多个元素？
答：可以使用相同的JavaScript代码分别控制每个元素的显示和隐藏状态。
document.getElementById('element1').style.display = 'block';
document.getElementById('element2').style.display = 'block';
document.getElementById('element3').style.display = 'block'; // ...其他元素
