1. 使用 `display: none;`： 当你设置一个元素的 `display` 属性为 `none` 时，该元素及其所有子元素都会从文档流中完全移除，不占据任何空间，也不会影响页面布局。
```html .hidden { display: none; }
This content is hidden. ```
2. 使用 `visibility: hidden;`： 设置元素的 `visibility` 属性为 `hidden` 会使元素不可见，但它仍然占据页面上的空间，因此会影响布局。
```html .hidden { visibility: hidden; }
This content is invisible but still takes up space. ```
3. 使用 `opacity: 0;`： 将元素的 `opacity` 设置为 `0` 会使元素完全透明，因此不可见，但它仍然保留在文档流中，占据空间，不影响布局。
```html .hidden { opacity: 0; }
This content is transparent and invisible. ```
4. 使用 `position: absolute;` 和 `left: 9999px;`： 将元素定位到屏幕外，使其不可见。这种方法通常用于隐藏但不希望从文档流中移除的元素。
```html .hidden { position: absolute; left: 9999px; }
This content is offscreen and invisible. ```
5. 使用 `textindent: 9999px;` 和 `overflow: hidden;`： 这种方法通常用于隐藏文本内容，但保持元素的空间和布局。
```html .hiddentext { textindent: 9999px; overflow: hidden; }
This text is hidden but the element still takes up space. ```
6. 使用 `height: 0;` 和 `overflow: hidden;`： 这种方法可以隐藏元素的高度，使其不可见，但元素仍然占据宽度。
```html .hiddenheight { height: 0; overflow: hidden; }
This element is hidden but still takes up width. ```
7. 使用 `width: 0;` 和 `overflow: hidden;`： 这种方法可以隐藏元素的宽度，使其不可见，但元素仍然占据高度。
```html .hiddenwidth { width: 0; overflow: hidden; }
This element is hidden but still takes up height. ```
8. 使用 `pointerevents: none;`： 这种方法会使元素不响应鼠标事件，如点击、悬停等，但元素仍然可见。
```html .hiddenevents { pointerevents: none; }
This element does not respond to mouse events. ```
1. visibility属性
CSS中的`visibility`属性可以用来控制元素的可见性。将`visibility`属性设置为`hidden`可以隐藏元素，但元素仍然占据空间。
```css
.hidden {
visibility: hidden;
2. display属性
`display`属性可以用来控制元素的显示方式。将`display`属性设置为`none`可以完全隐藏元素，包括其占位空间。
```css
.hidden {
display: none;
3. opacity属性
`opacity`属性可以控制元素的透明度。将`opacity`设置为小于1的值可以使元素半透明，从而实现隐藏效果。
```css
.hidden {
opacity: 0;
transition: opacity 0.5s;
1. 使用document.getElementById()
通过`document.getElementById()`方法获取元素对象，然后设置其`style`属性来隐藏或显示元素。
```javascript
function hideElement() {
var element = document.getElementById('elementId');
element.style.display = 'none';
2. 使用document.getElementsByClassName()
通过`document.getElementsByClassName()`方法获取一组元素对象，然后遍历这些对象并设置其`style`属性来隐藏或显示元素。
```javascript
function hideElements() {
var elements = document.getElementsByClassName('elementClass');
```html
