CSS：display作用

介绍

在Web开发中，display 是CSS（层叠样式表）的一个属性，用于定义元素应该生成的框的类型。不同的display值会导致元素以不同的方式出现在页面上，例如，作为一个块级元素、内联元素或表格单元格等。

常用的属性值及其作用

1. block - 该值将元素设置为块级元素

一个块级元素会占据其父元素的全部宽度，前后都会有换行。例如：<div> 和 <p> 元素默认为block。

举例

div {
  display: block;
  width: 300px;
  height: 200px;
  background-color: lightblue;
}

分析

在这个例子中，任何<div>元素都将被显示为一个块级元素，占据完整的容器宽度，并且在前后都会有换行。

2. inline - 将元素设置为内联元素

内联元素只占据必要的宽度来包含其内容，不会强制进行换行。例如：<span> 和 <a> 元素默认为inline。

举例

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

分析

这里，<span>元素将显示为内联元素，只占用必要的宽度，并且不会导致换行。

3. inline-block - 将元素设置为内联块级元素

这意味着元素既具有块级元素的宽度自动适应特性，又保持内联元素的并排布局特性。

举例

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: lightgreen;
  text-align: center;
}

分析

这个例子中，任何带有.button类的元素都将显示为内联块级元素，可以设置宽度和高度，同时保持在同一行显示。

4. flex - 将元素定义为弹性容器，为其子元素提供灵活的布局能力

使用Flexbox布局模型可以更方便地设计复杂的响应式布局。

举例

.container {
  display: flex;
  justify-content: space-around;
}
.item {
  flex: 1;
  background-color: lightyellow;
  margin: 5px;
}

分析

在这个例子中，.container元素将成为一个弹性容器，其子元素（带有.item类的元素）将按照Flexbox规则排列，justify-content: space-around;属性将使得子元素在主轴方向上均匀分布。

5. grid - 将元素定义为网格容器，允许其子元素按照网格布局来排列

这是CSS Grid布局的一部分，用于创建二维布局系统。

举例

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.grid-item {
  background-color: lightgrey;
  padding: 20px;
  text-align: center;
}

分析

在这个例子中，.grid-container元素将成为一个网格容器，其子元素（带有.grid-item类的元素）将按照CSS Grid规则排列，形成三列布局。

6. table - 使元素的行为类似于 <table> 元素，使其子元素可以按照表格布局来排列

举例

.table {
  display: table;
  width: 100%;
  border-collapse: collapse;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  border: 1px solid black;
  padding: 8px;
}

分析

在这个例子中，.table、.row和.cell类模仿了HTML表格的行为，允许你使用CSS来创建表格布局。

7. none - 使元素不显示，也不会占据任何空间

与visibility: hidden;不同，后者隐藏元素但保留其占据的空间。

举例

.hidden {
  display: none;
}

分析

任何带有.hidden类的元素都将不会显示在页面上，也不会占据任何空间。

总结

display 属性对于控制页面布局和元素之间的交互至关重要，是实现响应式设计和页面元素精确定位的关键工具之一。