详解CSS display属性中常见的四个属性值用法

在CSS布局中，display属性是最核心的属性之一，它决定了元素在页面中的渲染方式，比如是独占一行还是和其他元素并列显示，是否生成块级框或者行内框等。今天我们就来详细讲解display属性里最常用的四个属性值：block、inline、inline-block、none，并且通过实际的代码实例来演示它们的效果。

一、display: block（块级元素）

设置display: block的元素会生成块级框，这类元素的特点非常明显：默认情况下会独占父容器的一整行，宽度默认是父容器的100%，可以设置宽度、高度、内边距和外边距，并且会在前后自动添加换行。

常见的原生块级元素有<div>、<p>、<h1>到<h6>、<ul>、<li>等，即使原本是行内元素，设置display: block之后也会具备块级元素的特性。

下面的代码演示了display: block的效果：

/* 基础样式，方便观察效果 */
.box {
  width: 200px;
  height: 60px;
  background-color: #e6f7ff;
  margin: 10px 0;
  text-align: center;
  line-height: 60px;
}

/* 普通span是行内元素，默认不会独占一行 */
.normal-span {
  background-color: #fff3e6;
}

/* 设置display为block后，span变成块级元素 */
.block-span {
  display: block;
}

<div class="box">我是默认的块级div</div>
<span class="normal-span">我是普通行内span，不会独占一行</span>
<span class="normal-span">我也是普通行内span，会和前面的span在同一行</span>
<span class="block-span">我是设置display:block的span</span>
<span class="block-span">我也是设置display:block的span，会独占一行</span>

运行上面的代码可以看到，普通的<span>会排列在同一行，而设置了display: block的<span>每个都会单独占一行，宽度默认和父容器一致，即使内容很少也不会和其他元素共享一行。

二、display: inline（行内元素）

设置display: inline的元素会生成行内框，这类元素的特点是：不会独占一行，只会占据自身内容所需的宽度，多个行内元素会从左到右依次排列，直到父容器宽度不够才会换行。但是行内元素默认不能设置宽度和高度，设置的上下的外边距和内边距也不会影响其他元素的布局。

常见的原生行内元素有<span>、<a>、<strong>、<em>等，块级元素设置display: inline之后也会变成行内元素。

下面的代码演示了display: inline的效果：

/* 基础样式 */
.inline-demo {
  background-color: #f0f9eb;
  padding: 5px 10px;
  margin: 5px;
}

/* 默认div是块级，设置inline后变成行内 */
.inline-div {
  display: inline;
  /* 设置宽度高度不会生效 */
  width: 300px;
  height: 100px;
}

<div class="inline-demo inline-div">我是变成行内的div</div>
<div class="inline-demo inline-div">我也是行内div</div>
<span class="inline-demo">我是普通行内span</span>
<span class="inline-demo">我也是行内span</span>

运行代码后可以看到，原本是块级的<div>设置display: inline之后，会和<span>一样排列在同一行，即使设置了宽度和高度也不会生效，只会根据自身内容调整宽度。

三、display: inline-block（行内块元素）

display: inline-block结合了块级元素和行内元素的特点：它对外表现为行内元素，不会独占一行，会和其他行内元素或者行内块元素在同一行排列；对内表现为块级元素，可以设置宽度、高度、内边距和外边距，这些设置会影响自身布局，也会对周围的元素产生间距影响。

这个属性值在需要排列多个固定大小的组件时非常常用，比如导航栏的按钮、商品卡片列表等场景。

下面的代码演示了display: inline-block的效果：

/* 基础样式 */
.ib-item {
  display: inline-block;
  width: 120px;
  height: 80px;
  background-color: #fef0f0;
  margin: 10px;
  text-align: center;
  line-height: 80px;
  border-radius: 4px;
}

<div class="ib-item">卡片1</div>
<div class="ib-item">卡片2</div>
<div class="ib-item">卡片3</div>
<div class="ib-item">卡片4</div>
<div class="ib-item">卡片5</div>

运行代码后可以看到，所有的卡片都在同一行排列（如果父容器宽度足够），同时每个卡片都可以设置固定的宽度和高度，还有外边距来控制间距，这比单纯的行内元素或者块级元素都更灵活。

四、display: none（隐藏元素）

设置display: none的元素会直接从渲染树中移除，页面上不会显示该元素，同时该元素也不会占据任何布局空间，相当于这个元素完全不存在于页面中。这和visibility: hidden有本质区别，后者只是隐藏元素，但是元素原本占据的空间还会保留。

这个属性值常用于需要动态切换元素显示隐藏的场景，比如下拉菜单、折叠面板等。

下面的代码演示了display: none的效果：

/* 基础样式 */
.toggle-box {
  width: 200px;
  height: 100px;
  background-color: #f4f4f5;
  margin: 10px 0;
  text-align: center;
  line-height: 100px;
}

/* 隐藏元素 */
.hide {
  display: none;
}

<div class="toggle-box">我是正常显示的盒子</div>
<div class="toggle-box hide">我是设置了display:none的盒子</div>
<div class="toggle-box">我后面的盒子，不会被隐藏的元素占据空间</div>

运行代码后可以看到，第二个盒子完全不会显示，而且第三个盒子会直接紧挨着第一个盒子排列，中间没有留出任何空间，说明隐藏的元素不会参与布局。

四个属性值对比总结

为了更清晰地区分这四个属性值的差异，我们可以用下面的表格来总结：

实际开发中，我们可以根据布局需求灵活选择对应的display属性值，熟练掌握这四个常用值，就能解决大部分基础的布局问题。

CSS_display属性blockinlineinline_block元素隐藏