display 属性详解（微信小程序 & CSS 通用）​

display 是 CSS 和微信小程序 WXSS

1. display 的基本分类

display

值

作用

适用场景

block

块级元素，占满整行

(默认值)

inline

行内元素，不换行

，超链接

inline-block

既是行内元素，又可设置宽高

按钮、徽章

none

隐藏元素，不占空间

用于动态控制显示

flex

弹性布局，子元素可自动调整位置

适用于自适应布局

2. display: block(块级元素)

特点

•独占一整行，默认宽度 100%。

•可以设置 width、height、margin、padding。

•适用于布局结构中的 容器

示例

我是块级元素

.block-box { display: block; width: 200px; height: 50px; background-color: lightblue;}

✅ 效果：占满整行，宽度 200px，有背景色。

3. display: inline(行内元素)

特点

•不独占一整行，多个 inline

•不能 设置 width、height(但 padding、margin 部分有效)。

•适用于 短文本、标签、超链接。

示例

我是行内元素我也是行内元素

.inline-text { display: inline; color: red;}

✅ 效果：两个 text 在 同一行 显示，不会换行。

4. display: inline-block(行内块元素)

特点

•像 inline 一样，不换行，但 可以设置 width、height(不像 inline)。

•适用于 按钮、徽章、图片等需要自定义大小的元素。

示例

按钮1按钮2

.inline-block-box { display: inline-block; width: 100px; height: 40px; text-align: center; line-height: 40px; background-color: #007aff; color: white; border-radius: 5px; margin: 5px;}

✅ 效果：两个 view 并排显示，但仍可设置宽高。

5. display: none(隐藏元素)

特点

•彻底隐藏元素，不占据页面空间(不同于 visibility: hidden)。

•适用于动态控制 UI 组件的显示和隐藏。

示例

我被隐藏了

.none-box { display: none;}

✅ 效果：页面 不会显示 这个 view，也不会占用空间。

6. display: flex(弹性布局)

特点

•让子元素 自动调整大小、位置，适用于 响应式布局。

•配合 justify-content、align-items 使用。

示例

 1 2 3

.flex-container { display: flex; justify-content: space-between; /* 让子元素均匀分布 */ align-items: center; background-color: #f8f8f8; padding: 10px;}.flex-item { width: 50px; height: 50px; background-color: lightblue; text-align: center; line-height: 50px;}

✅ 效果：3 个 view 水平排列，间距均匀。

7. display: grid(网格布局)

特点

•适用于 复杂的网格布局。

•类似于 table，但更灵活。

示例

 A B C D

.grid-container { display: grid; grid-template-columns: repeat(2, 100px); /* 两列 */ grid-gap: 10px; background-color: #eee;}.grid-item { width: 100px; height: 50px; background-color: lightcoral; text-align: center; line-height: 50px;}

✅ 效果：两列 网格排列。

8. display: table(表格布局)

特点

•让元素像 表格一样排列(适用于特殊场景)。

•子元素必须是 display: table-cell。

示例

 单元格 1 单元格 2

.table { display: table; width: 100%;}.table-cell { display: table-cell; text-align: center; border: 1px solid #ccc; padding: 10px;}

✅ 效果：类似 HTML

9. display: contents(让元素消失但保留子元素)

特点

•让 当前元素消失，但 保留子元素。

•适用于去掉无意义的嵌套结构。

示例

 我直接显示出来了！

.contents { display: contents;}

✅ 效果： 不再占据空间， 直接显示。

10. display: inherit / initial / unset

🔥 display 使用推荐

总结

•块级元素 (block)：独占一行，适合 view

•行内元素 (inline)：适合短文本，如 text。

•弹性布局 (flex)：适合自适应布局。

•网格布局 (grid)：适合复杂结构。

•动态隐藏 (none)：隐藏元素。

如果你有 特定的布局需求，告诉我，我可以帮你 优化最佳 display 方案` 🚀😊