CSS 属性: Display vs. Visibility

在本文中，我们将介绍CSS的两个重要属性：display和visibility。这两个属性都用于控制元素的可见性，但在使用时有一些差异和注意事项。

阅读更多：CSS 教程

`display` 属性

display用于定义元素在文档流中的显示方式。它可以控制元素是以块级元素还是行内元素的形式展示。常用的 display 值有以下几种：

block：元素将以块级元素的形式显示，它会独占一行，并且可以设置宽度、高度、边距等属性。
inline：元素将以行内元素的形式显示，它不会独占一行，只会占据内容所需要的空间。
inline-block：元素将以行内块元素的形式显示，类似于行内元素，但可以设置宽度、高度、边距等属性。
none：元素将不再显示，所有与该元素相关的空间都将被其他元素占据。

下面是一些示例：

<style>
  .box {
    display: block;
    width: 200px;
    height: 200px;
    background-color: red;
    margin: 10px;
  }

  .inline-box {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: blue;
    margin: 10px;
  }
</style>

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

<span class="inline-box"></span>
<span class="inline-box"></span>
<span class="inline-box"></span>

在上面的示例中，使用了 display 属性控制了元素的显示方式。前三个 box 元素使用 display: block;，呈现为块级元素，每个元素独占一行。后面三个 inline-box 元素使用 display: inline-block;，呈现为行内块元素，每个元素占据所需空间但不会独占一行。

需要注意的是，display 属性会影响元素在盒模型中的计算。例如，display 为 none 的元素不会在盒模型中占据空间。

`visibility` 属性

visibility属性用于控制元素的可见性。它可以接受以下几个值：

visible：元素可见，即正常显示。
hidden：元素隐藏，但仍占据页面布局空间。
collapse：常用于表格元素，元素隐藏并且释放页面布局空间。

下面是一个示例：

<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: red;
    margin: 10px;
    visibility: hidden;
  }
</style>

<div class="box"></div>
<div class="box" style="visibility: visible;"></div>

在上面的示例中，.box 元素的初始 visibility 属性设置为 hidden，因此它在页面上是隐藏的，但仍然占据着布局空间。第二个 .box 元素通过内联样式将 visibility 设置为 visible，所以它是可见的。

需要注意的是，visibility 属性只能影响元素的可见性，无法影响其他布局属性。

`display: none` vs. `visibility: hidden`

虽然 display: none; 和 visibility: hidden; 都可以隐藏元素，但它们之间有一些区别：

display: none;：元素会被完全移除，不再显示，并且在文档流中也不再占据空间。通过 JavaScript 也无法获取该元素。
visibility: hidden;：元素处于隐藏状态，但仍然占据空间，只是不可见。通过 JavaScript 仍然可以获取该元素。

通常情况下，当需要完全从页面中移除一个元素时，使用 display: none; 更为合适。而对于需要在页面布局中占据空间但暂时隐藏的元素，使用 visibility: hidden; 更为合适。

总结

本文介绍了CSS中的两个重要属性：display和visibility。display 属性用于控制元素在文档流中的显示方式，常用值有 block、inline 和 none。visibility 属性用于控制元素的可见性，常用值有 visible、hidden 和 collapse。我们还比较了 display: none; 和 visibility: hidden; 的差异，提醒您在使用时根据需求做出选择。