1. block（块级元素）:
块级元素会在新的一行开始，其宽度会填满父元素的宽度，并且可以设置宽度、高度、内边距和外边距。
div {
display: block;
}
2. inline（内联元素）:
内联元素不会开始新的一行，其宽度只会包裹其内容，不能设置宽度和高度，仅支持水平方向的内边距和外边距。
span {
display: inline;
}
3. inline-block（内联块级元素）:
内联块级元素不会开始新的一行，但可以设置宽度、高度、内边距和外边距，且会在水平方向上呈现块级元素的特性。
img {
display: inline-block;
}
4. none（隐藏元素）:
display: none; 会隐藏元素，元素不会在页面中占据空间，也不会被渲染。
.hidden {
display: none;
}
5. flex（弹性盒子）:
display: flex; 定义了一个弹性容器，其子元素将按照弹性布局模型排列。
.container {
display: flex;
}
6. grid（网格布局）:
display: grid; 定义了一个网格容器，其子元素将按照网格布局模型排列。
.container {
display: grid;
}
7. table（表格元素）:
display: table; 定义了一个块级表格容器，可以使用类似表格的布局。
.table-container {
display: table;
}
8. inline-table（内联表格元素）:
display: inline-table; 定义了一个内联表格容器，具有内联元素的特性。
.table-container {
display: inline-table;
}
9. table-cell（表格单元格）:
display: table-cell; 定义了一个表格单元格，用于在表格中布局元素。
.cell {
display: table-cell;
}
这些 display 属性值是用于控制元素如何在页面中布局和显示的重要工具。根据具体的设计需求，你可以选择合适的 display 属性值来实现所需的页面布局和效果。
转载请注明出处：http://www.zyzy.cn/article/detail/12534/CSS