跳到主要内容

CSS 显示属性

CSS 的 display 属性是控制网页布局的核心属性之一。它决定了元素在页面中的显示方式，以及如何与其他元素交互。通过 display 属性，我们可以将元素设置为块级元素、内联元素、弹性盒子等，从而实现复杂的布局效果。

什么是 display 属性？​

display 属性定义了元素的显示类型。每个 HTML 元素都有一个默认的 display 值，例如 <div> 的默认值是 block，而 <span> 的默认值是 inline。通过修改 display 属性，我们可以改变元素的布局行为。

常见的 display 值​

以下是 display 属性的一些常见值：

  • block：元素显示为块级元素，占据一整行。
  • inline：元素显示为内联元素，与其他内联元素共享一行。
  • inline-block：元素显示为内联块级元素，可以设置宽度和高度，但不会独占一行。
  • none：元素不显示，且不占据空间。
  • flex：元素显示为弹性盒子容器，用于创建灵活的布局。
  • grid：元素显示为网格容器，用于创建复杂的网格布局。

块级元素 vs 内联元素​

块级元素（block）​

块级元素会占据其父容器的整个宽度，并且会在前后各添加一个换行符。常见的块级元素包括 <div>、<p>、<h1> 到 <h6> 等。

css
div {
  display: block;
  width: 100%;
  background-color: lightblue;
}

输出：

这是一个块级元素

内联元素（inline）​

内联元素只占据其内容所需的宽度，并且不会强制换行。常见的内联元素包括 <span>、<a>、<strong> 等。

css
span {
  display: inline;
  background-color: lightcoral;
}

输出：

这是一个内联元素

内联块级元素（inline-block）​

内联块级元素结合了块级元素和内联元素的特性。它们可以设置宽度和高度，但不会独占一行。

css
div {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: lightgreen;
}

输出：

内联块级元素

隐藏元素（none）​

通过将 display 属性设置为 none，可以完全隐藏元素，并且该元素不会占据任何空间。

css
div {
  display: none;
}

输出：

这个元素被隐藏了

弹性盒子布局（flex）​

flex 是 CSS3 引入的一种强大的布局模式，用于创建灵活的、响应式的布局。通过将 display 属性设置为 flex，可以将元素变为弹性盒子容器。

css
.container {
  display: flex;
  justify-content: space-between;
}

.item {
  width: 100px;
  height: 100px;
  background-color: lightpink;
}

输出：

1
2
3

网格布局（grid）​

grid 是另一种强大的布局模式，用于创建复杂的网格布局。通过将 display 属性设置为 grid，可以将元素变为网格容器。

css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.item {
  background-color: lightyellow;
  padding: 20px;
}

输出：

1
2
3

实际应用场景​

导航栏布局​

在导航栏中，我们通常希望链接水平排列，并且能够灵活调整间距。这时可以使用 display: flex 来实现。

css
nav {
  display: flex;
  justify-content: space-around;
  background-color: lightgray;
  padding: 10px;
}

nav a {
  text-decoration: none;
  color: black;
}

输出：

图片画廊​

在图片画廊中，我们可能希望图片以网格形式排列。这时可以使用 display: grid 来实现。

css
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.gallery img {
  width: 100%;
  height: auto;
}

总结​

display 属性是 CSS 布局的基础，通过它可以控制元素的显示方式。无论是块级元素、内联元素，还是更复杂的弹性盒子和网格布局，display 属性都扮演着至关重要的角色。掌握 display 属性的使用，可以帮助你创建更加灵活和响应式的网页布局。

附加资源与练习​

  • 练习 1：尝试创建一个简单的网页布局，使用 display: flex 来实现导航栏和内容区域的布局。
  • 练习 2：使用 display: grid 创建一个图片画廊，确保图片在不同屏幕尺寸下都能良好显示。
  • 资源：MDN Web Docs - display
提示

记住，display 属性是 CSS 布局的核心，熟练掌握它将为你的网页设计带来无限可能！