[分享]css中display有哪些值

CSS中的display属性用于设置元素的显示方式。常用的display值有以下几种:

p {
  display: block;
} 

1. block

block元素是一个块级元素，占据一整行空间，能够设置宽度、高度、边距和内边距等等。一般用于布局和排版，如段落、标题、div容器等。

img {
  display: inline;
} 

2. inline

inline元素是一个行内元素，不会占据一整行空间，宽度和高度会随着内容变化，只能设置水平方向的边距和内边距。一般用于小部件、文本片段、超链接等。

span {
  display: inline-block;
} 

3. inline-block

inline-block元素既有块级元素的特性又有行内元素的特性，可以设置宽度和高度，同时又不会占据一整行空间。一般用于图文混排、表单元素、按钮等。

div {
  display: none;
} 

4. none

none元素是一个隐藏元素，不会在页面上显示，也不会占据任何空间。一般用于实现动态显示和隐藏的效果，如弹窗、模态框、下拉列表等。

ul {
  display: flex;
} 

5. flex

flex元素是弹性布局的一种，可以设置父元素和子元素的布局方式，如水平排列、垂直排列、自适应排列等等。一般用于实现复杂的布局需求，如导航栏、网格系统、购物车等。

除了以上常用的display值，还有一些值在特定情况下会使用，如table、list-item、table-cell等等，具体可查看CSS规范文档。