css样式怎么隐藏起来

1. 前言

在开发网页时，我们往往需要隐藏一些元素，让它们在特定条件下显示。这时，CSS样式就变得非常重要。而在CSS中，我们使用 display 属性来控制元素的显示和隐藏。

2. display属性

2.1 display:none

使用 display: none; 可以让元素完全隐藏，从而释放出该元素所占的空间，并且该元素不会被渲染。

#hidden-element {
  display: none;
}

上面的代码将id为“hidden-element”的元素隐藏起来了。

2.2 display:block

使用 display: block; 可以让元素以块级元素的形式显示，即元素会独占一行，宽度默认为父元素的宽度。

#block-element {
  display: block;
}

上面的代码将id为“block-element”的元素显示为块级元素。

2.3 display:inline

使用 display: inline; 可以让元素以内联元素的形式显示，即元素不会独占一行，宽度只会占据其内容所需的宽度。

#inline-element {
  display: inline;
}

上面的代码将id为“inline-element”的元素显示为内联元素。

2.4 display:inline-block

使用 display: inline-block; 可以让元素同时拥有块级元素和内联元素的特性，即元素不会独占一行，但是可以设置其宽度和高度。

#inline-block-element {
  display: inline-block;
}

上面的代码将id为“inline-block-element”的元素显示为内联块级元素。

3. 利用display属性控制元素的隐藏

如前所述， display属性可以控制元素的显示样式，当 display 属性设置为 none 时，元素就会被隐藏起来。

#hidden-element {
  display: none;
}

上面的代码就将id为“hidden-element”的元素隐藏了。

4. 利用visibility属性控制元素的隐藏

另一种隐藏元素的方式是使用 visibility 属性。

4.1 visibility:hidden

使用visibility: hidden; 可以让元素隐藏，但是元素所占的空间仍然会被保留下来。

#hidden-element {
  visibility: hidden;
}

上面的代码将id为“hidden-element”的元素隐藏。

4.2 visibility:visible

使用visibility: visible; 可以让元素重新显示。

#hidden-element {
  visibility: visible;
}

上面的代码将id为“hidden-element”的元素重新显示。

5. 总结

在CSS中，我们可以利用 display 属性和 visibility 属性来控制元素的显示和隐藏。其中， display: none 可以完全隐藏元素，将其从文档流中移除；visibility: hidden 可以让元素不可见，但仍然会在文档流中占据位置。