`、`

`等都是块级元素。可以设置`width`、`height`，可以设置上下左右的margin和padding。

 

2. `inline`：内联元素，水平方向排列，不会独占一行，只占据所包含内容的宽度。``、``等默认为内联元素。不可以设置`width`、`height`，水平方向的margin和padding生效，垂直方向的margin和padding无效。不会自动换行，超出容器的部分会溢出。

 

3. `inline-block`：内联块元素，与内联元素类似，水平方向排列，不会独占一行。但可以设置`width`、`height`、margin和padding。即既具有块级元素的宽高设置特点，又具有内联元素不独占一行特点。

 

4. `flex`：Flex布局，可以创建灵活的盒子布局。元素根据flex容器的大小和排列方向调整自身的宽度和高度。可以通过设置`flex-grow`、`flex-shrink`、`flex-basis`等属性来控制元素的伸缩程度。

 

5. `grid`：Grid布局，可以创建二维的布局结构。通过将容器分成网格行和网格列，然后在网格里布置和对齐元素。可以使用`grid-template-rows`、`grid-template-columns`、`grid-template-areas`等属性来定义网格的结构。

 

6. `none`：元素不显示，完全从文档流中移除。在布局中不占据空间。可以用来动态地隐藏和显示元素。

 

注意，在CSS中还有其他的值，例如`inline-table`、`table`等，用于控制元素的显示方式。但这些值用的较少，我们不做详细介绍。

 

除此之外，`display`属性还有一些其他的取值，可以进一步控制元素的显示效果：

 

1. `display: flex | inline-flex`：用于设置Flex容器的显示方式。`flex`将元素变为Flex容器，子元素按照Flex布局排列；`inline-flex`则是将Flex容器变为内联元素。

 

2. `display: flow-root`：用于创建一个BFC（块级格式化上下文）作用域，将元素自身及其子元素包装在一个块级框中，可以解决一些常见的布局问题。

 

3. `display: contents`：用于使元素的子元素变为和父元素（设置了`display: contents`的元素）平级，相当于父元素“不占位”。

 

通过不同的`display`属性取值，我们可以灵活地控制页面元素的布局和显示效果。这些属性值可以根据具体需求进行灵活组合，以达到所需的布局效果。