【前端CSS3】CSS显示模式

在CSS中，display属性定义了一个元素应该生成的框的类型。这里是一些常用的display值及其描述：

• none: 元素不会显示，也不会占据任何空间。
• block: 元素会作为块级元素显示，前后会带有换行符。
• inline: 默认值。元素会被显示为内联元素，元素前后没有换行符。
• inline-block: 元素可以像内联元素那样在文本流中行动，但是它仍然保持着块级元素的特性，比如宽度和高度。
• table: 元素作为块级表格来显示，表格前后带有换行符。
• table-row: 作为一个表格行显示。
• table-cell: 作为一个表格单元格显示。
• flex: 元素作为弹性盒子显示。
• grid: 元素作为网格容器显示。

示例代码：

/* 将div设置为内联块级元素 */
div.inline-block {
  display: inline-block;
  width: 100px;
  height: 100px;
}
 
/* 将ul设置为表格 */
ul.table {
  display: table;
  width: 100%;
}
 
/* 将li设置为表格行 */
ul.table li {
  display: table-row;
}
 
/* 将最里面的li设置为表格单元格 */
ul.table li span {
  display: table-cell;
}
 
/* 将div设置为弹性盒子 */
div.flex {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
}
 
/* 将div设置为网格容器 */
div.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100px;
  height: 100px;
}

在这个例子中，我们展示了如何使用不同的display值来修改元素的显示模式。这些display值可以用来创建复杂的布局，包括响应式设计、弹性盒子布局和网格布局。