、

至

等。
inline
：行内元素，不会独占一行，宽度由内容决定，相邻的行内元素会在同一行显示。常见元素包括

、

、

等。
inline-block
：行内块元素，结合了block和inline的特性，可以设置宽度和高度，同时保持行内显示。常用于创建行内水平排列的块状元素。
none
：元素不显示，也不占用页面空间。常用于隐藏元素，或在需要时通过脚本改变其显示状态。
flex
：启用弹性盒模型布局，提供灵活的子元素对齐、排序和分布。适用于复杂的一维布局。
grid
：启用网格模型布局，可以创建二维布局。适用于创建复杂的二维布局，如网页的主要内容区域。
table
、
table-row
、
table-cell
：分别模拟HTML表格模型的显示行为。适用于创建类似表格的布局。
list-item
：模拟列表项的显示行为，通常与

元素一起使用。适用于创建自定义列表样式。
不同display取值的应用
使用block布局
使用
block
布局可以创建简单的网页结构。例如，每个

元素代表一个页面区域。

这是一个页面区域。

使用inline-block创建导航栏
利用
inline-block
可以创建一个导航栏，其中的链接并排显示，同时可以设置每个链接的尺寸。

链接1

链接2

使用flex布局
flex布局是现代前端开发中的热门选择。通过设置
display: flex
，我们可以将容器内的子元素进行弹性布局，实现水平或垂直居中、分布对齐等效果。

子元素1

子元素2

子元素3

使用grid布局
grid布局适用于更复杂的页面布局。通过设置
display: grid
，我们可以将元素划分为网格，自由定义行和列，创建出多种形式的布局。

网格1

网格2

网格3

网格4

网格5

网格6

总结
display属性是前端开发中强大的工具，可以控制元素的显示和布局方式。通过设置不同的取值，我们可以实现块级元素的排列、弹性布局的灵活性以及网格布局的复杂结构。了解display属性的用法，将有助于我们轻松掌控页面布局的秘密武器。

---