CSS 显示和可见性
03-css2026/11/14
CSS 的 display 和 visibility 都是控制元素显示和隐藏的重要属性，但它们的工作方式和效果有本质区别。
display 属性
display 属性定义元素应该生成的框的类型，它决定了元素如何参与页面流式布局。
1. 常用 display 值
块级元素：
- 独占一行
- 可以设置宽度、高度
- 默认宽度为父元素的 100%
- 示例：
<div>,<p>,<h1>-<h6>,<section>
.element {
display: block; /* 元素显示为块级元素，前后有换行符 */
}
行内元素：
- 在一行内显示
- 不能设置宽度、高度
- 宽度由内容决定
- 示例：
<span>,<a>,<strong>,<em>
.element {
display: inline; /* 元素显示为行内元素，前后无换行符 */
}
行内块元素：
- 像行内元素一样排列（不换行）
- 像块级元素一样可以设置宽度、高度
- 示例：
<img>,<button>,<input>
.element {
display: inline-block; /* 行内块元素 */
}
隐藏并移除布局：
.element {
display: none; /* 元素隐藏，且不占据空间 */
}
2. 现代布局 display 值
Flexbox 布局：
又称：弹性布局
.container {
display: flex; /* 块级弹性容器 */
display: inline-flex; /* 行内弹性容器 */
}
Grid 布局：
又称：网格布局
.container {
display: grid; /* 块级网格容器 */
display: inline-grid; /* 行内网格容器 */
}
其他值：
.element {
display: table; /* 像表格一样显示 */
display: table-cell; /* 像表格单元格一样显示 */
display: list-item; /* 像列表项一样显示 */
}
visibility 属性
visibility 属性控制元素是否可见，但不改变元素的布局位置。
常用 visibility 值：
.element {
visibility: visible; /* 默认值，元素可见 */
visibility: hidden; /* 元素不可见，但仍占据空间 */
visibility: collapse; /* 主要用于表格元素，在 table-row 中可折叠行 */
}