【乔二参】CSS Display(显示) 与 Visibility（可见性）详解

https://gitee.com/qercan/software-sharing

非常感谢您的支持！您的点赞、关注和评论是我创作的动力。我会继续努力，提供高质量内容，如有任何建议，请随时与我联系。

CSS Display 与 Visibility

1. Display（显示）

定义

在CSS中，display属性决定了元素如何在页面上布局，以及元素如何与其他元素进行交互。它定义了元素在页面流中的类型和行为。

用途

display属性主要用于控制元素的布局方式。通过修改display的值，可以改变元素是块级元素、行内元素还是其他类型的元素。这有助于我们精确地控制页面布局。

基本语法

display属性的常见值包括：

• block：元素作为块级元素显示，例如<div>、<p>等。
• inline：元素作为行内元素显示，例如<span>、<a>等。
• none：元素不会被显示，也不会占据页面空间。
• inline-block：元素以行内块级元素显示，结合了inline和block的特性。
• flex：元素成为弹性容器，用于弹性布局。
• grid：元素成为网格容器，用于网格布局。

常见示例

/* 隐藏元素，不占据空间 */
.hidden {
  display: none;
}

/* 将行内元素变为块级元素 */
span.block {
  display: block;
}

/* 使用弹性布局 */
.flex-container {
  display: flex;
}

2. Visibility（可见性）

定义

visibility属性用于控制元素是否可见，但它与display: none;不同。即使元素不可见，它仍然会占据页面空间。

用途

visibility属性主要用于在不改变元素布局的情况下控制元素的可见性。例如，你可能想要在页面加载时隐藏某个元素，然后在某个事件（如点击按钮）发生后显示它。

基本语法

visibility属性的常见值包括：

• visible：元素可见。
• hidden：元素不可见，但仍占据页面空间。
• collapse：主要用于表格行或列，表示行或列被完全隐藏（不是所有浏览器都支持）。

常见示例

/* 隐藏元素，但占据空间 */
.invisible {
  visibility: hidden;
}

/* 在鼠标悬停时显示元素 */
.hover-visible:hover {
  visibility: visible;
}

总结

• display属性控制元素的布局方式和在页面流中的行为。
• visibility属性控制元素的可见性，但不改变元素在页面上的布局或占据的空间。

在实际开发中，根据需要选择使用display或visibility属性来达到期望的页面效果。

友情提示