CSS display - CSS

CSS display属性定义一个元素在文档流中如何显示。它可以使元素表现为块级元素或内联元素，也可以更改元素的visibility属性，使其隐藏或可见。

可能的值

display属性有多个可能的值，以下是一些常用的值:

• block：元素将表现为块级元素，会生成一个新的块框。相邻的块级元素会垂直放置。
• inline：元素将表现为内联元素，会生成一个内联框。相邻的内联元素会水平放置。
• inline-block：元素将表现为内联块级元素，会生成一个内联的块级框。相邻的内联块级元素会水平放置。
• none：元素不会在页面上显示，会同时隐藏元素的所有子元素。
• table：元素将表现为一个表。
• table-row：元素将表现为表格的一个行。
• table-cell：元素将表现为表格的一个单元格。

使用示例

以下示例展示了如何在CSS中使用display属性：

/* 作为一个块级元素，宽度为100% */
div {
  display: block;
  width: 100%;
}

/* 作为一个内联元素，红色文字 */
span {
  display: inline;
  color: red;
}

/* 作为一个内联块级元素，宽度为50% */
img {
  display: inline-block;
  width: 50%;
}

/* 不显示元素 */
.hidden {
  display: none;
}

总结

CSS display属性是CSS中最重要的属性之一。了解其不同的值和用途，可以帮助开发人员更好地控制元素的布局和外观。