彻底剖析display和visibility：揭开页面元素隐藏之谜！

display 和 visibility 的本质区别

虽然 display 和 visibility 都可以用来控制元素的显示和隐藏，但它们的工作原理却截然不同：

• display：

  • 负责确定元素在文档流中的行为。
  • 设置为 none 时，元素将从文档流中完全消失，不占用任何空间。
  • 设置为其他值（如 block、inline 或 flex）时，元素将在文档流中占据空间，并根据其特性进行显示。

• visibility：

  • 决定元素是否可见。
  • 设置为 hidden 时，元素仍然占据文档流中的空间，但不可见。
  • 设置为 visible 时，元素将以可见的形式显示在页面上。

display 的取值及其影响

display 属性拥有多种取值，每种取值都会对元素的显示和布局产生不同的影响：

• none： 将元素从文档流中完全隐藏，不占用任何空间。
• block： 元素以块状的形式显示，占据一整行，并与相邻元素上下相邻。
• inline： 元素以行内元素的形式显示，不换行，与相邻元素前后相邻。
• flex： 元素根据弹性布局规则进行显示，可以灵活调整元素的尺寸和排列方式。
• grid： 元素根据网格布局规则进行显示，可以创建更加复杂的页面布局。

visibility 的取值及其影响

visibility 属性的取值相对简单，只有两个：

• visible： 元素可见。
• hidden： 元素不可见。

display 和 visibility 的应用场景

在实际的网页设计中，display 和 visibility 属性各有其独特的应用场景：

• display：
  • 用于控制元素在文档流中的布局和行为。
  • 常用于隐藏不必要的元素，如广告或导航栏。
  • 也可用于创建特殊的布局效果，如隐藏内容或实现动画效果。
• visibility：
  • 用于控制元素的可见性。
  • 常用于动态显示或隐藏元素，如弹出窗口或提示框。
  • 也可用于创建一些交互效果，如鼠标悬停时显示隐藏内容。

重绘与回流

为了理解 display 和 visibility 的影响，有必要了解重绘和回流的概念：

• 重绘： 当元素的外观发生改变（如颜色、字体或背景颜色）时，浏览器会重新绘制该元素，使其在新样式下正确显示。
• 回流： 当元素的布局发生变化（如元素的尺寸、位置或文档流的变化）时，浏览器会重新计算元素在页面中的位置并重新绘制受影响的元素，这被称为回流。

display 属性的改变通常会触发回流，而 visibility 属性的改变只会触发重绘。因此，在考虑使用 display 和 visibility 属性时，需要权衡它们对性能的影响。

display 和 visibility 的选择

在选择 display 和 visibility 属性时，需要根据具体的需求来决定：

• 如果需要完全隐藏元素，不占用任何空间，应使用 display: none。
• 如果需要隐藏元素，但仍需占据文档流中的空间，应使用 visibility: hidden。
• 如果需要动态显示或隐藏元素，应使用 visibility: visible 或 visibility: hidden。
• 如果需要控制元素在文档流中的布局和行为，应使用 display 属性的相应取值。

总之，display 和 visibility 属性是 CSS 中用于控制元素显示和隐藏的两个重要属性。理解它们的本质区别及其应用场景，有助于你更加熟练地掌握网页设计和页面布局。