CSS display 属性

CSS 属性 display 用于指定元素如何显示在页面上。它控制元素是块级元素、内联元素还是其他特殊类型的元素。

值

display 属性可以取多个值，常见的有以下几种：

• block: 将元素显示为块级元素，即元素会独占一行，并且可以设置宽度、高度等属性。
• inline: 将元素显示为内联元素，即元素会在同一行内显示，并且不会独占一行。
• inline-block: 将元素显示为内联块级元素，即元素会在同一行内显示，但可以设置宽度、高度等属性。
• none: 隐藏元素，元素不会在页面上显示，但仍然占据空间。
• flex: 将元素显示为弹性盒子，可以通过设置弹性盒子相关属性来控制元素的布局。
• grid: 将元素显示为网格容器，可以通过设置网格容器相关属性来控制元素的布局。

示例代码

// www.javascriptcn.com code example
/* 将元素显示为块级元素 */
.block {
  display: block;
}

/* 将元素显示为内联元素 */
.inline {
  display: inline;
}

/* 将元素显示为内联块级元素 */
.inline-block {
  display: inline-block;
}

/* 隐藏元素 */
.hidden {
  display: none;
}

/* 将元素显示为弹性盒子 */
.flex {
  display: flex;
}

/* 将元素显示为网格容器 */
.grid {
  display: grid;
}

display 属性在 CSS 中是非常重要的，通过合理地运用 display 属性，可以控制页面元素的布局和显示方式，从而实现丰富多样的页面效果。