知识篇 -- CSS显示属性：掌控元素的呈现方式

Ray Shine 2023/11/11 CSS核心概念

本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

如有侵权，请联系本博主删除。

在CSS中，display 属性是控制元素如何显示以及如何参与布局的关键。它决定了元素是块级元素、行内元素，还是具有其他特殊布局行为（如弹性盒或网格）。理解 display 属性的不同值及其效果，是进行精确布局的基础。

# 一、`display` 属性的常见值

# 1. `block` (块级元素)

特点：
- 独占一行：无论内容多少，都会在新的一行开始，并尽可能占据父元素的全部宽度。
- 可设置宽高：可以自由设置 width、height、margin、padding。
- 垂直排列：块级元素通常垂直堆叠。
常见元素：<div>, <p>, <h1> - <h6>, <ul>, <ol>, <li>, <form>, <header>, <footer>, <section>, <article> 等。

示例：

<div style="background-color: lightblue; width: 100px; height: 50px;">Div 1</div>
<div style="background-color: lightcoral; width: 150px; height: 60px;">Div 2</div>

效果：两个 div 会上下排列，即使第一个 div 的宽度只有100px，它也会占据整行。

# 2. `inline` (行内元素)

特点：
- 不独占一行：多个行内元素可以在同一行上显示。
- 宽高由内容决定：width 和 height 属性无效，其宽度和高度由内容撑开。
- 水平排列：行内元素通常水平排列。
- 垂直外边距无效：margin-top 和 margin-bottom 无效，padding-top 和 padding-bottom 虽然会增加视觉空间，但不会影响其他元素的布局。
常见元素：<span>, <a>, <strong>, <em>, <img>, <input>, <label>, <select>, <textarea> 等。

示例：

<span style="background-color: lightblue; width: 100px; height: 50px;">Span 1</span>
<span style="background-color: lightcoral; width: 150px; height: 60px;">Span 2</span>

效果：两个 span 会在同一行显示，width 和 height 设置无效。

# 3. `inline-block` (行内块级元素)

特点：
- 兼具行内和块级特性：既可以像行内元素一样在同一行显示，又可以像块级元素一样设置 width、height、margin、padding。
- 水平排列：多个 inline-block 元素会水平排列。
常见元素：<img>, <input> 默认就是 inline-block。

示例：

<div style="display: inline-block; background-color: lightblue; width: 100px; height: 50px; margin: 10px;">Box 1</div>
<div style="display: inline-block; background-color: lightcoral; width: 150px; height: 60px; margin: 10px;">Box 2</div>

效果：两个 div 会在同一行显示，并且可以设置各自的宽度、高度和外边距。

# 4. `none` (隐藏元素)

特点：
- 完全隐藏：元素及其所有内容都不会显示。
- 不占据空间：元素在文档流中不占据任何空间，就像它从未存在过一样。
- 无法交互：用户无法点击或选择该元素。
示例：
```
.hidden-element {
    display: none;
}
```
效果：该元素将从页面上完全消失，不影响其他元素的布局。

# 二、现代布局模式：`flex` 和 `grid`

随着Web布局需求日益复杂，CSS3引入了两种强大的布局模式：Flexbox (弹性盒) 和 CSS Grid (网格布局)。

# 1. `flex` (弹性盒布局)

特点：
- 一维布局：主要用于在一个方向（行或列）上对齐和分布项目。
- 父子关系：通过在父容器上设置 display: flex; 来开启 Flex 布局，其直接子元素成为 Flex 项目。
- 灵活控制：提供了丰富的属性来控制项目的排列方向、对齐方式、空间分配等。

示例：

<div class="flex-container">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

.flex-container {
    display: flex;
    justify-content: space-around; /* 项目在主轴上均匀分布 */
    align-items: center; /* 项目在交叉轴上居中对齐 */
    height: 100px;
    background-color: #f0f0f0;
}
.flex-container > div {
    padding: 10px;
    background-color: #ccc;
}

效果：三个项目会在容器中水平排列，并均匀分布，垂直居中。

# 2. `grid` (网格布局)

特点：
- 二维布局：同时控制行和列，非常适合构建整个页面的复杂布局。
- 父子关系：通过在父容器上设置 display: grid; 来开启 Grid 布局，其直接子元素成为 Grid 项目。
- 区域划分：可以精确定义网格的行和列，并使用网格线或命名区域来放置项目。

示例：

<div class="grid-container">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="main">Main Content</div>
    <div class="footer">Footer</div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: 1fr 3fr; /* 左侧1份，右侧3份 */
    grid-template-rows: auto 1fr auto; /* 头部自适应，中间1份，底部自适应 */
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    height: 300px;
    gap: 10px;
    background-color: #e0e0e0;
}
.header { grid-area: header; background-color: #a0a0a0; }
.sidebar { grid-area: sidebar; background-color: #b0b0b0; }
.main { grid-area: main; background-color: #c0c0c0; }
.footer { grid-area: footer; background-color: #d0d0d0; }

效果：页面被划分为头部、侧边栏、主内容和底部区域，并按照定义的网格结构进行布局。

# 三、`display` 属性的更多值

除了上述常用值，display 还有一些其他值，例如：

list-item: 使元素表现得像列表项（如 <li>），通常会生成一个标记点。
table, table-row, table-cell 等：使元素表现得像HTML表格元素，用于模拟表格布局。
contents: 元素本身不生成任何盒子，但其子元素和伪元素会正常生成盒子。
run-in: 元素会根据上下文表现为块级或行内。

# 四、`visibility` 与 `display: none` 的区别

虽然 display: none; 和 visibility: hidden; 都能隐藏元素，但它们之间有本质区别：

display: none;：
- 元素从文档流中完全移除，不占据任何空间。
- 不会触发重绘和回流。
- 无法通过JavaScript获取其几何尺寸。
visibility: hidden;：
- 元素在文档流中仍然占据空间。
- 会触发重绘，但不会触发回流。
- 可以通过JavaScript获取其几何尺寸。
- 子元素的 visibility: visible; 可以使其重新显示。

理解 display 属性是CSS布局的基石。通过灵活运用不同的 display 值，可以实现各种复杂的页面结构和交互效果。

← 特异性与继承定位 →

一ξひβθ光 i