菜鸟教程
教程 css tutorial

display 属性详解

CSS 的 display 属性定义元素的显示类型，影响元素如何参与布局和渲染。

常见的 display 类型

1. block（块级元素）

  • 占据一整行，宽度默认撑满父元素。
  • 可以设置宽高、内外边距。
  • 常见元素：<div>, <p>, <h1>-<h6> 等。
css 
display: block;

2. inline（内联元素）

  • 不会换行，宽高由内容决定。
  • 不能设置宽高，只有内边距和边框影响布局。
  • 常见元素：<span>, <a>, <strong> 等。
css 
display: inline;

3. inline-block（内联块）

  • 结合了 block 和 inline 特性。
  • 可以设置宽高，但不会独占一行。
  • 常用于排列表单控件或按钮。
css 
display: inline-block;

4. none（隐藏元素）

  • 元素不显示，也不占据空间。
css 
display: none;

5. flex（弹性盒子）

  • 使元素成为弹性容器，方便实现复杂布局。
  • 子元素可灵活排列和伸缩。
css 
display: flex;

6. grid（网格布局）

  • 创建二维网格布局，管理行列。
css 
display: grid;

display 属性示例

在线代码演示
源码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8" />
<title>display 属性示例</title>
<style>
.block {
display: block;
width: 200px;
background-color: #81d4fa;
margin-bottom: 10px;
padding: 10px;
}


.inline {
  display: inline;
  background-color: #ffcc80;
  padding: 10px;
  margin-right: 5px;
  border: 1px solid #ffa726;
}

.inline-block {
  display: inline-block;
  width: 150px;
  background-color: #aed581;
  padding: 10px;
  margin-right: 5px;
  border: 1px solid #7cb342;
}

.none {
  display: none;
}

.flex-container {
  display: flex;
  background-color: #ce93d8;
  padding: 10px;
  gap: 10px;
}

.flex-item {
  background-color: #ba68c8;
  color: white;
  padding: 10px;
  flex: 1;
  text-align: center;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background-color: #b39ddb;
  padding: 10px;
  margin-top: 10px;
}

.grid-item {
  background-color: #7e57c2;
  color: white;
  padding: 10px;
  text-align: center;
}



</style>
</head>


<body>
<div class="block">块级元素 (block)</div>


<span class="inline">内联元素 (inline)</span>
<span class="inline">内联元素 (inline)</span>


<div class="inline-block">内联块元素 (inline-block)</div>
<div class="inline-block">内联块元素 (inline-block)</div>


<!-- display: none 隐藏示例（不可见） –>
<!-- <div class="none">隐藏元素 (none)</div> –>


<div class="flex-container">
<div class="flex-item">弹性盒子 1 (flex)</div>
<div class="flex-item">弹性盒子 2 (flex)</div>
<div class="flex-item">弹性盒子 3 (flex)</div>
</div>


<div class="grid-container">
<div class="grid-item">网格 1 (grid)</div>
<div class="grid-item">网格 2 (grid)</div>
<div class="grid-item">网格 3 (grid)</div>
</div>
</body>


</html>

相关内容