「css早读课」如何理解Display：None，Block，Inline，Inline-Block

时间 2019-11-15

标签 css 如何理解 display block inline 栏目 CSS 繁體版

原文原文链接

今天的早读课，笔者将介绍Display的相关属性，主要涉及的内容包含：css

display: none vs. visibility: hidden
display: block
display: inline
display: inline-block

Display: None vs. Visibility: Hidden

以下段代码所示，咱们有三个红、蓝、绿的方块，以下段代码所示：html

#box-1 {
  width: 100px;
  height: 100px;
  background: red;
}

#box-2 {
  width: 100px;
  height: 100px;
  background: blue;
}

#box-3 {
  width: 100px;
  height: 100px;
  background: green;
}

div {
  display: inline-block;
}

body {
  background: #efefef;
}复制代码

<div id="box-1"></div> <div id="box-2"></div> <div id="box-3"></div>复制代码

「早读课」如何理解Display：None，Block，Inline，Inline-Block

首先咱们先使用 display: none 属性隐藏蓝色的方块，以下段代码所示：前端

#box-2 {
  display: none;
  width: 100px;
  height: 100px;
  background: blue;
}复制代码

如上图所示，使用Display: None，咱们能够看出蓝色方块从中“删除”，中间的空位也被绿色的方块补位。微信

接着咱们使用 visibility: hidden 属性隐藏蓝色方块，以下段代码所示：spa

#box-2 {
  width: 100px;
  height: 100px;
  background: blue;
  visibility: hidden;
}复制代码

从上图咱们看出，使用Visibility: Hidden，咱们实现了蓝色方块的“隐藏”，中间的位置空缺保留。设计

Block vs. Inline

Block块级元素默认填满父级元素内容区域，旁边不能有其余元素，最多见的块级元素就是<div>,,<ul> 等。3d

Inline行内元素在一行文本内生成元素框，不打断所在的行。最多见的行内元素好比：,<img>,<a>。首先咱们下段没有CSS的Html代码:code

<body> <p>I'm a paragraph</p> <p>I'm a paragraph too</p> <span>I'm a word</span> <span>I'm a word too.</span> </body>复制代码

从上图咱们看出:cdn

两个元素占了两行,两个元素占了一行，因而可知每一个Html元素都有个默认的display属性:block或inline。xml

如下是关于 Block 和 Inline 差别的总结：

Block

默认100%占满父元素区域
每一个元素占一行
能够设置width和height属性
能够包含其余块级元素或行内元素。

以下代码示意：

p {
  height: 100px;
  width: 100px;
  background: red;
  color: white;
}复制代码

从中咱们能够看出设置了元素的宽和高，每一个红色方块会独占一行，以下图所示：

inline

按需占用空间
不断行，并排显示
width，height，top-bottom margin 等属性不起做用
能够是其余行内元素的父级。

以下段代码所示，咱们更改标签display的默认属性，让其成为行内元素：

p {
  height: 100px;
  width: 100px;
  background: red;
  color: white;
  display: inline;
}复制代码

从上图所示，咱们看出，元素变成了行内元素，咱们设置的宽和高并不起效，三个元素排成一行。

Display: Inline-block

某些状况下，行内元素和块级元素并不能知足咱们的设计需求，所以有了Inline-block这个属性，从属性的名字，咱们就能够分析出其综合了二者的一些特征。

咱们能够这样理解，这个属性是个行内属性，能够设置width和height或者咱们能够理解成一个块级元素，不用换行。

为了理解这个属性，咱们仍是从一段代码开始，以下所示：

p {
  display: inline-block;
  height: 100px;
  width: 100px;
  background: red;
  color: white;
}复制代码

从上面的效果图，咱们能够看出，使用此属性后，咱们让行内元素具有了宽高属性。

小节

今天的早读课就到这里，但愿经过本篇文章，你明白了display的这些属性。

更多精彩内容，请微信关注“前端达人”公众号！