在 CSS 中，display 属性常用来控制元素的显示方式，其可以设置多个不同的取值，下面我们一一介绍。

display: block;

当该属性取值为 block 时，元素会被渲染为块级元素，会占据整行宽度，并且默认情况下会自动换行。常用于布局中的容器元素，如 div。

display: inline;

当该属性取值为 inline 时，元素会被渲染为行内元素，不会独占一行，其宽度会根据内容自动调整。常用于文字、超链接等行内元素，如 a、span。

display: inline-block;

取值为 inline-block 时，元素会被渲染为行内块级元素，其宽度可以设置，但是不会独占一行。常用于既需要块级元素的特性，又需使用行内元素排列的场合。

display: none;

当该属性取值为 none 时，元素将不会被渲染，也不会占据任何空间。常用于动态展示/隐藏元素或元素占用过多空间的情况。

display: flex;

取值为 flex 时，元素将被渲染为一个弹性盒子容器，其子元素可以通过 flex 等属性进行排列和布局。常用于响应式布局、等宽布局等情况。

display: grid;

取值为 grid 时，元素将被渲染为一个 CSS 网格布局容器，可以通过 grid-area、grid-template-rows、grid-template-columns 等属性进行区域划分和布局。常用于复杂的网页布局。