display 属性详解

大G哥

于 2025-02-19 17:30:34 发布

阅读量793

点赞数 20

本文链接：https://blog.csdn.net/Java_fenxiang/article/details/145743064

版权

display 是 CSS 中 控制元素显示方式的属性，决定了 元素如何渲染、如何影响布局。它有多个取值，每个值的作用不同。

🎯 1. display 常见取值

值	作用	适用场景
block	块级元素，占满整行	div、p
inline	行内元素，不换行	span、a
inline-block	行内块元素，不换行但可设置宽高	button、input
flex	弹性布局，子元素可以自由排列	布局容器
grid	网格布局，二维排列	复杂布局
none	隐藏元素，不占空间	隐藏内容
table	让元素像 <table>	表格布局
contents	让元素的内容显示，但自身不参与布局	仅展示子元素

✅ 2. display: block(块级元素)

特点

• 占据整行(独占一行)

• 支持宽高 (width, height)

• 支持 margin、padding

• 默认从上往下排列

示例

📌 **适用于 div、p、h1-h6、ul、ol

✅ 3. display: inline(行内元素)

特点

• 不会换行，只占自身内容大小

• 不能设置 width / height(无效)

• margin、padding 仅水平方向生效

示例

📌 适用于 span、a、strong、em 等

🚨 ⚠️ 注意

• 无法设置 width / height，如果需要设置宽高，使用 inline-block。

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

特点

• 不会换行(和 inline 一样)

• 但可以设置 width 和 height(和 block 一样)

• 适用于按钮、输入框等需要大小控制的行内元素

示例

.inline-block {
  display: inline-block;
  width: 100px;
  height: 40px;
  background-color: lightcoral;
  text-align: center;
  line-height: 40px;
}

📌 适用于 button、input、img 等

✅ 5. display: flex(弹性布局，适用于容器)

特点

• 让子元素可以灵活排列

• 支持 justify-content(水平对齐)、align-items(垂直对齐)

• 适用于任何布局

示例

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

.flex-container {
  display: flex;
  justify-content: space-between; /* 子元素水平排列，均匀分布 */
  align-items: center; /* 垂直居中 */
  background-color: lightgreen;
}

.item {
  width: 50px;
  height: 50px;
  background-color: orange;
  text-align: center;
  line-height: 50px;
}

📌 适用于：布局容器、导航栏、侧边栏等。

✅ 6. display: grid(网格布局)

特点

• 二维布局，可精确控制行列

• 适用于复杂的排版

示例

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px; /* 三列 */
  gap: 10px; /* 间距 */
}

.grid-item {
  background-color: lightblue;
  text-align: center;
  padding: 10px;
}

📌 适用于：表格布局、复杂 UI 设计。

✅ 7. display: none(隐藏元素)

特点

• 元素不会显示，并且不占空间

• 适用于隐藏菜单、弹窗等

示例

📌 适用于：切换菜单、模态框。

🚨 ⚠️ display: none 与 visibility: hidden 的区别

属性	是否占空间	是否可交互
display: none	❌ 不占空间	❌ 无法交互
visibility: hidden	✅ 仍然占空间	❌ 无法交互

✅ 8. display: contents(让父元素消失)

特点

• 让元素的子元素显示，但自身不影响布局

• 类似 display: none，但不会隐藏子元素

示例

.parent {
  display: contents;
  background-color: red; /* 这个颜色不会生效 */
}

.child {
  color: blue;
}

📌 适用于：删除不必要的 div，优化 HTML 结构。

🎯 9. display 总结

display 值	作用
block	占满整行，支持宽高
inline	行内显示，不换行，不支持宽高
inline-block	行内显示，可设置宽高
flex	弹性布局，控制子元素排列
grid	网格布局
none	隐藏元素，不占空间
table	让元素像表格
contents	让父元素消失，但子元素仍然显示