CSS display属性完全指南：从基础到实战

css的display属性是网页布局的核心，它决定了元素如何显示在页面上。这个属性控制着元素的显示类型和其内部子元素的排列方式。不同的display值会带来完全不同的布局效果。

display属性的主要分类

display属性值可以分为几个大类：

基本显示类型：block、inline

布局容器：flex、grid、table

特殊用途：none、contents、list-item

混合类型：inline-block、inline-flex等

下面我们详细看看每个值的具体用法。

block（块级元素）

block元素会独占一行，宽度默认撑满父容器。可以设置宽度、高度、内外边距。

.block-element {
  display: block;
  width: 300px;
  height: 100px;
  background: lightblue;
  margin: 10px 0;
}

html

<p>这是一段文字</p>
<div class="block-element">这是一个块级元素</div>
<p>这是另一段文字</p>

常见的块级元素有div、p、h1-h6、section等。

inline（行内元素）

inline元素不会独占一行，可以和其他行内元素排在同一行。设置宽度和高度无效，水平方向的内外边距有效。

.inline-element {
  display: inline;
  background: lightcoral;
  margin: 0 10px;
  padding: 5px;
}

html

<span>这是行内元素</span>
<div class="inline-element">这也是行内元素</div>
<span>另一个行内元素</span>

常见的行内元素有span、a、strong、em等。

flex（弹性布局）

flex布局非常适合一维布局，可以轻松实现水平垂直居中、等分布局等效果。

.flex-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;    /* 垂直居中 */
  height: 200px;
  background: #f0f0f0;
}

.flex-item {
  width: 80px;
  height: 80px;
  margin: 0 10px;
  background: lightgreen;
}

html

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

flex布局的主要特点：

子元素默认排成一行

可以轻松控制子元素的对齐方式

支持响应式排列

grid（网格布局）

grid布局适合二维布局，可以同时控制行和列的排列。

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px;
  gap: 10px;
  background: #f0f0f0;
  padding: 10px;
}

.grid-item {
  background: lightblue;
  display: flex;
  align-items: center;
  justify-content: center;
}

html

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

grid布局的优势：

可以精确控制每个网格单元的位置

支持复杂的布局结构

响应式设计很方便

table（表格布局）

虽然现在不推荐用table做页面布局，但在需要表格样式的场景中仍然有用。

.table {
  display: table;
  width: 100%;
  border-collapse: collapse;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
  padding: 8px;
  border: 1px solid #ddd;
}

html

<div class="table">
  <div class="table-row">
    <div class="table-cell">姓名</div>
    <div class="table-cell">年龄</div>
    <div class="table-cell">城市</div>
  </div>
  <div class="table-row">
    <div class="table-cell">张三</div>
    <div class="table-cell">25</div>
    <div class="table-cell">北京</div>
  </div>
</div>

none（隐藏元素）

元素完全隐藏，不占据空间。

.hidden {
  display: none;
}

html

<div class="hidden">这个元素不会显示</div>
<div>这个元素会正常显示</div>

注意：如果只是想隐藏元素但保留空间，应该使用visibility: hidden。

inline-block（行内块元素）

兼具block和inline的特点：可以设置宽高，又可以和其他行内元素排在同一行。

.inline-block-item {
  display: inline-block;
  width: 100px;
  height: 50px;
  background: lightblue;
  margin: 5px;
  text-align: center;
  line-height: 50px;
}

html

<div class="inline-block-item">项目1</div>
<div class="inline-block-item">项目2</div>
<div class="inline-block-item">项目3</div>

list-item（列表项）

让元素显示为列表项，会生成一个标记符号。

.custom-list-item {
  display: list-item;
  list-style-type: square;
  margin-left: 20px;
}

html

<div class="custom-list-item">自定义列表项1</div>
<div class="custom-list-item">自定义列表项2</div>

flow-root（创建BFC）

创建新的块级格式化上下文，常用于清除浮动。

.container {
  display: flow-root;
  background: #f0f0f0;
}

.float-left {
  float: left;
  width: 100px;
  height: 100px;
  background: lightblue;
}

html

<div class="container">
  <div class="float-left">浮动元素</div>
  <div>普通内容</div>
</div>

inline-flex和inline-grid

这两个值让flex和grid容器变成行内元素。

.inline-flex-container {
  display: inline-flex;
  background: lightyellow;
}

.inline-grid-container {
  display: inline-grid;
  grid-template-columns: 50px 50px;
  background: lightgreen;
}

html

<span>文字</span>
<div class="inline-flex-container">
  <div>flex项</div>
</div>
<span>更多文字</span>
<div class="inline-grid-container">
  <div>网格</div>
  <div>项目</div>
</div>

实际应用建议

选择合适的布局方式

简单线性布局：使用flex

复杂二维布局：使用grid

传统布局：使用block和inline-block

浏览器兼容性考虑

flex和grid在现代浏览器中支持良好

如果需要支持老浏览器，要有回退方案

性能考虑

简单的display值性能更好

复杂的布局方式在频繁重排时可能影响性能

响应式设计

结合媒体查询使用不同的display值：

.menu {
  display: block;
}

@media (min-width: 768px) {
  .menu {
    display: flex;
  }
}

总结

display属性是CSS布局的基础，理解每个值的特性和适用场景很重要。从基本的block和inline，到现代的flex和grid，每个值都有其独特的用途。

在实际项目中，建议根据具体需求选择合适的display值。简单的布局用基本的显示类型，复杂的响应式布局用flex或grid。通过合理使用display属性，可以创建出既美观又实用的网页布局。

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/12993