【CSS 面经】display 属性值及其作用详解

在 Web 开发中，display 是一个非常常见且重要的 CSS 属性。它决定了元素如何在页面上显示和排列。通过合理使用 display 属性，可以实现各种布局效果，从简单的行内元素到复杂的网格布局。本文将详细介绍 display 属性的常用值及其作用，帮助大家更好地理解和应用这个属性。

一、display 属性概述

display 属性用于设置一个元素的显示行为。根据不同的值，元素的显示方式可以大不相同。例如，某些元素可能表现为块级元素，而其他元素则可能表现为行内元素或其他特殊布局形式。掌握 display 属性的不同取值，对于完成各种布局设计至关重要。

display 的常见取值

1. block：块级元素
2. inline：行内元素
3. inline-block：行内块元素
4. none：隐藏元素
5. flex：弹性盒布局
6. grid：网格布局
7. list-item：列表项元素

其他常见值

• run-in：适用于某些特殊情况的元素，通常与文档流结合使用。
• contents：该值允许元素的子元素表现为它们的父元素的直系后代，但父元素本身不占据空间。

二、常见的 display 值及其作用

1. block：块级元素

block 是 display 属性最常见的值之一，表示元素会作为块级元素显示。块级元素占据一整行，其宽度默认为父容器的宽度，可以设置宽高，并且元素之间会有换行。

示例：

<div style="display:block;">这是一个块级元素</div>

块级元素的常见例子包括 <div>、<p>、<h1> 等。块级元素总是占据一整行，即使其内容较少，也会撑开整个行宽。

2. inline：行内元素

inline 表示元素是行内元素，即不会在元素前后自动换行。行内元素仅占据它所需要的宽度和高度，不能设置宽高，并且可以与其他元素共享同一行。常见的行内元素有 <span>、<a>、<strong> 等。

示例：

<span style="display:inline;">这是一个行内元素</span>

inline 元素的特点是不会打断页面的流，多个 inline 元素可以紧密排列在一行中。

3. inline-block：行内块元素

inline-block 是 inline 和 block 的结合体。它表现为行内元素，但它同时也支持设置宽高。也就是说，元素不会占据整个行，但可以设置其尺寸，并且可以在同一行中排列。

示例：

<div style="display:inline-block; width:100px; height:100px; background-color:red;">这是一个行内块元素</div>

inline-block 元素不仅可以控制宽高，还能与其他元素并排显示，因此常用于需要同时具备行内和块级元素特性的情况。

4. none：隐藏元素

none 值意味着该元素不显示，并且完全从文档流中消失。与 visibility: hidden 不同，display: none 会导致元素不占据任何空间，因此不会影响到其他元素的布局。

示例：

<div style="display:none;">这个元素会被隐藏</div>

使用 display: none 时，元素不仅不可见，而且不再占据页面布局的空间，其他元素会填补空缺。

5. flex：弹性布局

flex 是 CSS3 中引入的一种布局方式，它使得容器的子元素可以根据可用空间灵活排列。display: flex 将容器设为弹性盒子模型，它可以轻松实现水平或垂直对齐、分布等复杂的布局需求。

示例：

<div style="display:flex;">
  <div style="flex:1; background-color:red;">元素1</div>
  <div style="flex:1; background-color:blue;">元素2</div>
</div>

flex 布局的优势在于，它能够灵活地调整子元素的宽度和位置，同时支持动态调整响应式布局。

6. grid：网格布局

grid 是另一种 CSS3 布局方法，它通过将元素划分为网格单元，使得元素能够更精确地控制位置和尺寸。使用 display: grid 可以将容器转变为网格布局，进一步提升布局的灵活性。

示例：

<div style="display:grid; grid-template-columns: 1fr 1fr;">
  <div style="background-color:red;">元素1</div>
  <div style="background-color:blue;">元素2</div>
</div>

grid 布局为复杂的多列布局提供了强大的支持，通过设置行和列的大小，可以非常容易地创建自适应布局。

7. list-item：列表项元素

list-item 通常用于创建列表项元素，和 block 类似，但它会默认添加一个列表标记（如数字或项目符号）。常用于 <ul> 或 <ol> 列表中的 <li> 元素。

示例：

<ul>
  <li style="display:list-item;">列表项1</li>
  <li style="display:list-item;">列表项2</li>
</ul>

list-item 对于那些需要有默认标记的列表元素非常有用。

三、常见的面试考点

1. display 属性的默认值是什么？

大多数元素的默认值是 block 或 inline，例如 <div> 默认是 block，而 <span> 默认是 inline。

2. 如何改变元素的显示类型？

使用 display 属性可以非常容易地改变元素的显示类型。通过设置不同的 display 值，你可以使元素表现为块级、行内、弹性布局或网格布局等。

3. display: none 和 visibility: hidden 的区别？

display: none 会彻底移除元素，并且它不占据空间，而 visibility: hidden 只是隐藏元素，元素依然占据空间。理解这两者的区别对于动态显示和隐藏元素非常重要。

推荐：

• JavaScript
• react
• vue

---