display属性的各种取值

display属性是CSS中控制元素布局方式的核心属性之一，决定了元素在文档流中的表现行为。不同的取值会直接影响元素的盒模型、排列方式以及与其他元素的交互关系。

display: block

块级元素独占一行，默认宽度撑满父容器，可设置宽高、内外边距。常见的块级元素包括<div>、<p>、<h1>-<h6>等。

<style>
  .box {
    display: block;
    width: 200px;
    height: 100px;
    background-color: coral;
    margin: 10px auto;
  }
</style>
<div class="box">这是一个块级盒子</div>

块级元素会强制换行，即使设置了width也不会与其他元素并列显示。通过margin: auto可实现水平居中。

display: inline

行内元素不独占一行，宽度由内容决定，不可设置宽高和垂直方向的内外边距。典型行内元素如<span>、<a>、<strong>等。

<style>
  .highlight {
    display: inline;
    background-color: yellow;
    /* 以下属性无效 */
    width: 100px;
    height: 50px;
    margin-top: 20px;
  }
</style>
<p>这是一段包含<span class="highlight">高亮文本</span>的内容</p>

行内元素的padding和border会生效但可能与其他元素重叠，垂直方向的margin不会影响布局。

display: inline-block

兼具行内和块级特性：元素可与其他行内元素共处一行，同时允许设置宽高和所有边距。适合需要精确控制尺寸但需水平排列的场景。

<style>
  .button {
    display: inline-block;
    width: 120px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: steelblue;
    color: white;
    margin: 5px;
  }
</style>
<div class="button">按钮1</div>
<div class="button">按钮2</div>

常见应用包括导航菜单项、按钮组等需要水平排列的交互元素。

display: none

完全从渲染树中移除元素，不占据任何空间且不可见。与visibility: hidden不同，后者会保留元素空间。

<style>
  .hidden {
    display: none;
  }
</style>
<div>可见内容</div>
<div class="hidden">不可见内容</div>
<div>后续内容会紧接显示</div>

常用于动态显示/隐藏元素，配合JavaScript实现标签页、折叠面板等交互效果。

display: flex

启用弹性盒子布局，容器内的子元素成为弹性项目，可灵活控制排列方向、对齐方式和空间分配。

<style>
  .container {
    display: flex;
    gap: 10px;
    justify-content: space-around;
  }
  .item {
    width: 80px;
    height: 80px;
    background: gold;
  }
</style>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

主要属性包括：

• flex-direction 控制主轴方向
• justify-content 主轴对齐
• align-items 交叉轴对齐
• flex-wrap 换行方式

display: grid

创建网格布局，通过行和列的定义实现二维布局系统，比传统布局方式更精确高效。

<style>
  .grid {
    display: grid;
    grid-template-columns: 100px 1fr 2fr;
    grid-gap: 15px;
  }
  .cell {
    background: lavender;
    padding: 20px;
  }
</style>
<div class="grid">
  <div class="cell">A</div>
  <div class="cell">B</div>
  <div class="cell">C</div>
  <div class="cell">D</div>
  <div class="cell">E</div>
</div>

关键特性：

• grid-template-columns/rows 定义网格轨道
• grid-area 项目定位
• fr 单位实现弹性尺寸
• 支持命名网格线

display: table

模拟传统表格布局，适用于需要表格样式但使用非表格元素的情况。

<style>
  .table {
    display: table;
    width: 100%;
    border-collapse: collapse;
  }
  .row { display: table-row; }
  .cell {
    display: table-cell;
    border: 1px solid #ddd;
    padding: 8px;
  }
</style>
<div class="table">
  <div class="row">
    <div class="cell">姓名</div>
    <div class="cell">年龄</div>
  </div>
  <div class="row">
    <div class="cell">张三</div>
    <div class="cell">28</div>
  </div>
</div>

完整系列包括：

• table-row-group
• table-header-group
• table-footer-group
• table-caption

display: list-item

使元素表现为列表项，生成标记框（marker box）和主框（principal box）。

<style>
  .custom-list {
    display: list-item;
    list-style-type: square;
    margin-left: 20px;
  }
</style>
<div class="custom-list">项目一</div>
<div class="custom-list">项目二</div>

可通过list-style-type修改标记样式，支持disc|circle|square|decimal等值。

display: inline-flex 和 display: inline-grid

行内级别的弹性盒子和网格容器，外部表现为行内元素，内部保持flex/grid特性。

<style>
  .inline-flex {
    display: inline-flex;
    background: aliceblue;
  }
  .inline-grid {
    display: inline-grid;
    grid-template-columns: repeat(2, 50px);
    background: honeydew;
  }
</style>
<div>
  文本开头
  <span class="inline-flex">
    <span>flex项1</span>
    <span>flex项2</span>
  </span>
  中间文本
  <span class="inline-grid">
    <span>A</span>
    <span>B</span>
  </span>
  文本结尾
</div>

其他特殊取值

display: contents

元素自身不生成任何框，其子元素提升为父元素的子元素。常用于突破某些布局限制。

<style>
  .contents {
    display: contents;
    border: 1px solid red; /* 无效 */
  }
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
</style>
<div class="grid">
  <div class="contents">
    <div>子元素1</div>
    <div>子元素2</div>
  </div>
  <div>正常网格项</div>
</div>

display: flow-root

创建新的块级格式化上下文(BFC)，解决浮动导致的父元素高度塌陷问题。

<style>
  .float-left { float: left; }
  .flow-root {
    display: flow-root;
    background: #f0f8ff;
  }
</style>
<div class="flow-root">
  <div class="float-left">浮动元素</div>
</div>

display: ruby

用于实现东亚文字的注音排版，配合<ruby>、<rt>等语义化标签使用。

<style>
  ruby { display: ruby; }
  rt { display: ruby-text; }
</style>
<ruby>
  漢 <rt>han</rt>
  字 <rt>zi</rt>
</ruby>

多关键字语法

CSS3引入的双值语法允许更精确地控制内外显示类型：

.container {
  display: block flex; /* 外部表现为块级，内部使用flex布局 */
}
.inline-list {
  display: inline list-item; /* 行内列表项 */
}

浏览器兼容性考虑

• IE10/11对flexbox支持存在部分缺陷
• display: contents在Edge 79+才完全支持
• 旧版浏览器需要前缀-webkit-、-ms-等
• 使用@supports进行特性检测：

@supports (display: grid) {
  .container { display: grid; }
}