display 是 CSS 和微信小程序 WXSS

1. display 的基本分类

display

2. display: block（块级元素）

特点

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

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

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

示例

<view class="block-box">我是块级元素</view>

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

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

3. display: inline（行内元素）

特点

• 不独占一整行，多个 inline

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

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

示例

<text class="inline-text">我是行内元素</text>
<text class="inline-text">我也是行内元素</text>

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

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

4. display: inline-block（行内块元素）

特点

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

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

示例

<view class="inline-block-box">按钮1</view>
<view class="inline-block-box">按钮2</view>

.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 组件的显示和隐藏。

示例

<view class="none-box">我被隐藏了</view>

.none-box {
  display: none;
}

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

6. display: flex（弹性布局）

特点

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

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

示例

<view class="flex-container">
  <view class="flex-item">1</view>
  <view class="flex-item">2</view>
  <view class="flex-item">3</view>
</view>

.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，但更灵活。

示例

<view class="grid-container">
  <view class="grid-item">A</view>
  <view class="grid-item">B</view>
  <view class="grid-item">C</view>
  <view class="grid-item">D</view>
</view>

.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。

示例

<view class="table">
  <view class="table-cell">单元格 1</view>
  <view class="table-cell">单元格 2</view>
</view>

.table {
  display: table;
  width: 100%;
}

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

✅ 效果：类似 HTML <table>。

9. display: contents（让元素消失但保留子元素）

特点

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

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

示例

<view class="contents">
  <text>我直接显示出来了！</text>
</view>

.contents {
  display: contents;
}

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

10. display: inherit / initial / unset

🔥 display 使用推荐

总结

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

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

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

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

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

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