三分钟快速了解CSS Display的属性：Block,Inline,Inline-Block

三分钟快速了解CSS Display的属性：Block,Inline,Inline-Block

元素的类型可以分为块级元素和行内元素两大类，但是还有一种比较特殊的元素：行内块级元素。

Block

块级元素就是在网页中以块的形式出现的，以块的形式出现的意思就是元素显示为矩形区域.除了<div>之外，还有 <h1>到 <h6>， <p>， <form>， <header>， <footer>， <section>， <article>都是块元素。独占一行支持宽高，不设置宽度时，宽度为父元素宽度

块级元素的特点：

1. 在页面中以矩形区域显示。
2. 自上而下排列，独占一行。
3. 可以直接添加宽高
4. 一般情况下可以作为其他元素或内容的容器

示例：

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, nesciunt sapiente aliquid reprehenderit voluptas sequi enim earum iusto, itaque culpa nulla dolore, vitae unde qui quaerat? Rem magni animi dolor!</p><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, in sapiente. Similique ea illo ipsa tenetur soluta ad commodi. Labore molestias vero atque illum dolorum! Facilis nisi sint commodi quam?</p>

p {
  width: 50%;
  background-color: yellow;
}

从上图可以看出来p标签是块元素，独自占据一行，即使宽度设置为一半，下面的p标签的元素也不会上移动到右边。

Inline

此元素会被显示为内联元素或者叫做行内元素.不支持宽高，内容撑开宽度。例如最典型的span,a,strong标签等等。

行内元素的特点

1. 在页面显示也是矩形
2. 一行内逐个显示（横排显示）
3. 不可以直接添加宽高，大小由内容撑开
4. 行内样式遵循盒子模型的规则可以设置内外边距、边框、背景，但是个别属性会出现问题。

比如我们可以把之前的例子改造为inline的。

p {
  display: inline;
  width: 50%; /*不起作用*/
  background-color: yellow;
}

我们再来看看一个<strong>示例：

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, nesciunt <strong>sapiente </strong>aliquid reprehenderit voluptas sequi enim earum iusto, itaque culpa nulla dolore, vitae unde qui quaerat? Rem magni animi dolor!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, in sapiente. Similique ea illo ipsa tenetur soluta ad commodi. Labore molestias vero atque illum dolorum! Facilis nisi sint commodi quam?</p>

p {
  width: 50%;
  padding: 20px;
  margin: 30px;
  border: 1px solid green;
  background-color: yellow;
}

strong {
  background-color: red;
  border: 1px solid green;
  width: 100px; /*无效设置*/
  height: 100px;/*无效设置*/
  margin: 10px; /*只有左右起作用*/
  padding: 5px; 

}

当然我们也可以把这个strong标签改成block元素。

strong {
  background-color: red;
  border: 1px solid green;
  width: 100px; /*无效设置*/
  height: 100px;/*无效设置*/
  margin: 10px; /*只有左右起作用*/
  padding: 5px; 
  display: block;

}

Inline-block

内联区块元素或者叫行内块元素。设置了inline-block属性的元素既具有block元素可以设置width和height属性的特性，又保持了inline元素不换行的特性。不设置宽度时，内容撑开宽度，非独占一行，支持宽高。

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, nesciunt <strong>sapiente </strong>aliquid reprehenderit voluptas sequi enim earum iusto, itaque culpa nulla dolore, vitae unde qui quaerat? Rem magni animi dolor!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, in sapiente. Similique ea illo ipsa tenetur soluta ad commodi. Labore molestias vero atque illum dolorum! Facilis nisi sint commodi quam?
  <a href="#">More</a>
</p>

p {
  width: 50%;
  padding: 20px;
  margin: 30px;
  border: 1px solid green;
  background-color: yellow;
}

strong {
  background-color: red;
  border: 1px solid green;
  width: 100px; /*无效设置*/
  height: 100px; /*无效设置*/
  margin: 10px; /*只有左右起作用*/
  padding: 5px;
}

a {
  display: inline-block;
  width: 80px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: black;
  color: white;
  border-radius: 4px; /*设置圆角*/
  text-decoration: none; /*移除超链接底线 */
}

Block,Inline,Inline-Block的左右对齐方法

<div>Block</div>
<span>Inline</span>
<br>
<strong>Inline-block</strong>

div {
  width: 50%;
   /*让block元素居中*/
  margin-left: auto;
  margin-right: auto;
   /*让block元素居中*/
}
strong {
  display: inline-block;
}
div,
span,
strong {
  background-color: black;
  color: white;
  text-align: center;
}

body {
  text-align: center; /*通过设置text-align: center 可以让上面的inline和inline-block的字体相对于body来说是居中显示的，但是block设置了宽度，所以只是相对于block元素字体居中了*/
}