常见的 display 总结一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第10天，点击查看活动详

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第10天，点击查看活动详情。

前言

在日常开发中我们会碰到特别多的 display 属性，就每个不同的 html 元素，它默认的 display 属性也是不同的，对于一些奇奇怪怪的 display 属性，使用不当的情况下会很影响我们日常的开发。

本文稍微介绍一下比较常见的部分 display 属性，并且对于部分场景会进行比较深入的介绍

display 所有的属性

/* CSS 1 */
display: none;
display: inline;
display: block;
display: list-item;
/* CSS 2.1 */
display: inline-block;
display: table;
display: inline-table;
display: table-cell;
display: table-column;
display: table-column-group;
display: table-footer-group;
display: table-header-group;
display: table-row;
display: table-row-group;
display: table-caption;
/* CSS 2.1 */
/* CSS 3 */
display: inline-list-item;
display: flex;
display: box;
display: inline-flex;
display: grid;
display: inline-grid;
display: ruby;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;
/* CSS 3 */
/* Experimental values */
display: contents;
display: run-in;
/* Experimental values */
/* Global values */
display: inherit;
display: initial;
display: unset;

下面按顺序主要介绍一下以下几个常用的属性：

display: none;
display: inline;
display: block;
display: inline-block;
display: inline-flex;
display: box;

display: none;

无论元素本身或者它的父元素带上 display: none; 的样式的时候，标签上的图片都会被请求回来，但是不会进行渲染

<style>
  div {
    display: none;
  }
  img {
    display: none;
  }
</style>
<div>
  <img src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="">
</div>

但是如果是放在样式表中作为背景图片，就既不会被渲染也不会去发送请求，只有当你改变 display: none; 的时候才会去发送请求获取图片。

// css
.img {
    width: 100%;
    height: 100%;
    background: url("https://www.baidu.com/img/flexible/logo/pc/result.png");
}
// html
<div class="imgBox">
    <div class="img"></div>
</div>
<button class="button">点击后显示图片</button>
// js
let imgBox = document.querySelector(".imgBox");
let button = document.querySelector(".button");
button.addEventListener("click", () => {
    imgBox.style.display = "block";
});

并且加载过一次的图片不会再次加载，我们尝试给两个 div 一样的背景图片，其中一个直接展示，另一个需要点击之后在展示，可以发现没有再次发送获取图片的请求。

根据上面的两点，在伪类中的背景图片也是在显示的时候才回去请求，这样子有时候会造成伪类出现的卡顿，所以可以使用雪碧图一次性加载，这样之后的伪类出现就不会因为网络出现卡顿的状况。

display: block;

display: block 代表‘块级’元素,这也是我们平时最常见到的 display 属性，div 的默认 display 就是为 display: block

关于 display: block 日常比较经常使用，这里就只做一个简单的描述。

block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度；

.div{
    height: 200px;
    background: black;
    border: 3px solid white;
}
...
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>

block元素哪怕设置了宽度，也会独占一行，在设置了宽度的时候，会通过margin来自动填充满一行。

.div{
    height: 200px;
    width: 200px;
    background: black;
    border: 3px solid white;
}
...
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>

display: inline;

display: inline代表‘行内’元素, 多个‘行内’元素会在同一行上，并且行高边距都是不可修改的，元素的高度就是内容的高度，只有当一行内的元素摆放不下了，就会自动换行。

.div{
    height: 200px;
    width: 200px;
    margin: 30px;
    padding: 30px;
    display: inline;
    background: rgb(253, 171, 171);
    border: 3px solid white;
}
...
<div class="div">1111111</div>
<div class="div">11111111</div>
<div class="div">111111</div>
<div class="div">111</div>

元素不受宽高影响，只会被内容撑开，并且上下的 margin 不生效，padding会生效，但是是根据里面内容的底部生效。

display: inline-block;

display: inline-block代表‘行内块’元素,设定为 display: inline-block 的元素既有着 display: inline 的换行特性，有着display: block可以设定宽高大小的特性，在日常的开发当中比较多使用。

我们可以先用一张图来看一下他们的区别，display: inline-block集合了前两个的优点，排列在一行并且可以设置宽高，margin，padding。

但是 display: inline-block 还是有着一个缺点，就是哪怕你没有设置 margin，padding 元素之间也会存在着一点点的间隙。

间隙产生的原因

元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。

解决办法

1.删除元素之间的空白

<div class="div">1111111</div><div class="div">11111111</div>
<div class="div">111111</div>
<div class="div">111</div>

只要div之间不存在换行或者空白，那么就不会出现间隙

但是很明显，这样子代码的可读性就会变差。

2.设置父元素的 font-size

我们上面提到了中间这个间隙的大小取决于font-size，所以我们可以为父元素中设置font-size: 0，在子元素上重置正确的font-size

 .imgBox {
    font-size: 0;
  }
  .div{
    height: 200px;
    width: 200px;
    font-size: 24px;
    display: inline-block;
    background: rgb(253, 171, 171);
  }
  ...
<div class="imgBox">
  <div class="div">1111111</div><div class="div">11111111</div>
  <div class="div">111111</div>
  <div class="div">111</div>
</div>

display: flex;

flex 布局相信没有多少人是不知道的，如果还有不清楚的可以看一下我之前的一篇介绍 flex 的文章。

flex布局学习记录~ - 掘金 (juejin.cn)

display: inline-flex;

flex：将对象作为弹性伸缩盒显示
inline-flex：将对象作为内联块级弹性伸缩盒显示

一句话来描述就是当Flex Box 容器没有设置宽度大小限制时，当display 指定为 flex 时，FlexBox 的宽度会填充父容器，当display指定为 inline-flex 时，FlexBox的宽度会包裹子Item，如下图所示：

注意这个属性其实就是个 inline 和 flex 的集合，子元素会作用 flex 布局，自身会变为 inline 布局，我们再来看一个例子：

.div {
  height: 200px;
  width: 200px;
  font-size: 24px;
  display: inline-flex;
  background: rgb(253, 171, 171);
}
.div1{
  width: 100px;
  height: 100px;
  background: violet;
}
...
<div class="div">
    <div class="div1"></div>
    <div class="div1"></div>
</div>
<div class="div">11111111</div>
<div class="div">111111</div>
<div class="div">111</div>

总结

本文稍微介绍了几个比较常见的 display 属性，我们日常最经常碰到的其实也就这几个，更多的 display 属性其实在日常的开发中比较少使用，有兴趣的可以另外去做一个了解。

常见 的 display 总结

前言