CSS 显示属性

显示属性（display）是CSS中用于控制元素显示类型的属性，它决定了元素如何生成盒模型以及如何在页面中布局。

基本语法

css 
元素选择器 {
  display: <值>;
}

常用值

1. block（块级元素）

块级元素的特点：

  • 独占一行空间
  • 默认宽度为父容器的100%
  • 可以设置宽高、内外边距
  • 常见的块级元素：div、p、h1-h6、ul、ol、li、table、form等
css 
span {
  display: block; /* 将行内元素转换为块级元素 */
}

2. inline（行内元素）

行内元素的特点：

  • 与其他行内元素在同一行显示
  • 宽度和高度由内容决定
  • 不能设置宽高、上下内外边距
  • 常见的行内元素：span、a、strong、em、img、input、button等
css 
div {
  display: inline; /* 将块级元素转换为行内元素 */
}

3. inline-block（行内块元素）

行内块元素结合了块级元素和行内元素的特点：

  • 与其他行内元素在同一行显示
  • 可以设置宽高、内外边距
  • 宽度和高度默认为内容的宽度和高度
css 
span {
  display: inline-block; /* 将行内元素转换为行内块元素 */
  width: 100px;
  height: 50px;
}

4. none（隐藏元素）

none值会完全隐藏元素，元素不占据任何空间：

css 
.element {
  display: none; /* 完全隐藏元素 */
}

5. flex（弹性盒模型）

flex值将元素转换为Flex容器：

css 
.container {
  display: flex; /* 转换为Flex容器 */
}

6. grid（网格布局）

grid值将元素转换为Grid容器：

css 
.container {
  display: grid; /* 转换为Grid容器 */
}

7. table相关值

用于创建表格布局：

  • table：将元素转换为表格
  • table-row：将元素转换为表格行
  • table-cell：将元素转换为表格单元格
  • table-header-group：将元素转换为表头组
  • table-footer-group：将元素转换为表尾组
css 
.container {
  display: table; /* 转换为表格 */
}

.row {
  display: table-row; /* 转换为表格行 */
}

.cell {
  display: table-cell; /* 转换为表格单元格 */
}

8. list-item（列表项）

list-item值将元素转换为列表项：

css 
div {
  display: list-item; /* 将元素转换为列表项 */
  list-style-type: disc; /* 设置列表项标记 */
}

9. inline-flex（行内弹性盒模型）

inline-flex值将元素转换为行内Flex容器：

css 
.container {
  display: inline-flex; /* 转换为行内Flex容器 */
}

10. inline-grid（行内网格布局）

inline-grid值将元素转换为行内Grid容器：

css 
.container {
  display: inline-grid; /* 转换为行内Grid容器 */
}

应用场景

1. 创建导航菜单

html 
<nav>
  <ul style="list-style: none; padding: 0; margin: 0;">
    <li style="display: inline-block; margin-right: 20px;"><a href="#">首页</a></li>
    <li style="display: inline-block; margin-right: 20px;"><a href="#">关于我们</a></li>
    <li style="display: inline-block;"><a href="#">联系我们</a></li>
  </ul>
</nav>

2. 图片画廊

html 
<div class="gallery" style="display: flex; flex-wrap: wrap;">
  <div class="image" style="flex: 0 0 25%; padding: 10px;">
    <img src="image1.jpg" alt="图片1" style="width: 100%;">
  </div>
  <div class="image" style="flex: 0 0 25%; padding: 10px;">
    <img src="image2.jpg" alt="图片2" style="width: 100%;">
  </div>
  <div class="image" style="flex: 0 0 25%; padding: 10px;">
    <img src="image3.jpg" alt="图片3" style="width: 100%;">
  </div>
  <div class="image" style="flex: 0 0 25%; padding: 10px;">
    <img src="image4.jpg" alt="图片4" style="width: 100%;">
  </div>
</div>

3. 表单布局

html 
<form style="display: grid; grid-template-columns: 1fr 2fr; gap: 10px;">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email">
  <label for="message">留言：</label>
  <textarea id="message" name="message" rows="4"></textarea>
  <div style="grid-column: 2; text-align: right;">
    <button type="submit">提交</button>
  </div>
</form>

4. 卡片布局

html 
<div class="cards" style="display: flex; flex-wrap: wrap; justify-content: space-between;">
  <div class="card" style="flex: 0 0 calc(33.33% - 20px); margin-bottom: 20px; border: 1px solid #ccc; padding: 10px;">
    <h3>卡片1</h3>
    <p>卡片内容...</p>
  </div>
  <div class="card" style="flex: 0 0 calc(33.33% - 20px); margin-bottom: 20px; border: 1px solid #ccc; padding: 10px;">
    <h3>卡片2</h3>
    <p>卡片内容...</p>
  </div>
  <div class="card" style="flex: 0 0 calc(33.33% - 20px); margin-bottom: 20px; border: 1px solid #ccc; padding: 10px;">
    <h3>卡片3</h3>
    <p>卡片内容...</p>
  </div>
</div>

5. 响应式布局

html 
<div class="container" style="display: flex; flex-wrap: wrap;">
  <div class="sidebar" style="flex: 0 0 250px;">侧边栏</div>
  <div class="main" style="flex: 1;">主要内容</div>
</div>

注意事项

  1. 盒模型变化：不同的display值会影响元素的盒模型计算方式。

  2. 布局上下文：display值会影响元素的布局上下文，如Flex容器、Grid容器等。

  3. 性能影响：某些display值（如flex和grid）可能会对性能产生影响，特别是在复杂布局中。

  4. 浏览器兼容性：不同的display值在浏览器中的支持情况不同，需要考虑降级方案。

  5. 与其他属性的关系：display值会影响其他CSS属性的效果，如margin、padding、width、height等。

浏览器兼容性

display值 Chrome Firefox Safari Edge IE
block 完全支持 完全支持 完全支持 完全支持 IE6
最后更新：2026-02-07