display有哪些常用属性值，grid布局和flex布局的区别？

display的属性值包括以下几种：

`block`: 元素会被显示为块级元素，即独占一行，默认情况下，div、p等元素的display属性值为block。
`inline`: 元素会被显示为内联元素，默认情况下，span、a等元素的display属性值为inline。
`inline-block`: 元素会被显示为内联块元素，即与其他元素在同一行内显示，并且可以设置宽高等属性。
`none`: 元素会被隐藏不显示，并且不占据页面空间。
`flex`: 元素会被显示为弹性元素，使用flex布局进行排列和伸缩。
`grid`: 元素会被显示为网格元素，使用grid布局进行排列。
`table`: 元素会被显示为表格元素，通过table相关的属性进行布局。

grid布局和flex布局的区别？

1. 布局方式：

– flex布局（弹性布局）是一维布局方式，主要用于在一个方向上对元素进行排列，可以是水平方向（row），也可以是垂直方向（column）。
– grid布局是二维网格布局方式，可以同时对元素在水平和垂直方向上进行布局，可以实现复杂的网格结构。

2. 兼容性：

– flex布局在大部分现代浏览器中都得到了很好的支持，但在一些旧版本的浏览器中可能存在兼容性问题。
– grid布局相对来说在现代浏览器中的兼容性更好，但在一些老旧的浏览器中仍可能存在兼容性问题。

3. 排列方式：

– flex布局通过设置容器的属性来控制元素的排列方式，比如justify-content和align-items。
– grid布局通过将元素放置在网格中的指定单元格位置来实现排列，可以控制元素的行列大小、间隔和对齐方式等。

4. 布局能力：

– flex布局相对简单，适用于较简单的布局需求，特别适用于移动端的响应式布局。
– grid布局功能更强大，可以实现复杂的网格结构和自适应布局，特别适用于构建复杂的页面布局。