Home / Questions / 24964
Accepted
Hoose
Asked: 2020-09-25 20:45:32 +0800 CST 2020-09-25 20:45:32 +0800 CST

display: block, display: inline 和 display: inline-block 有什么区别？

  • 772

在 CSS 中使用这些类型的元素时，我发现了一些关于差异的疑问。

那么这些元素之间有什么区别呢？

html

1 Answers

  1. Best Answer

    概括

    • 内联：在同一行显示所有元素（尊重流），不接受属性宽度、高度或垂直边距。
    • 块：在单独的行中显示元素并接受属性宽度、高度和垂直边距。
    • inline-block：它的行为是前两者的混合，所有元素都显示在同一行（考虑到流），它还接受属性宽度、高度和垂直边距。

    简而言之，某些 HTML 标签不受其他元素流动的影响，只是受限于它们的自然使用。

    内联或内联元素

    HTML定义的内联元素有：a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select , 小, 跨度, 罢工, 强, sub, sup, textarea, tt, u, var。

    这些标签的一个例子可能是<a>，<em>也许是最有用的<span>，所有这些元素都被称为“内联”，因为默认情况下它们带有它们的display: inline，而不需要在 CSS 文档中指定它。

    假设我们有以下场景：

    .box {
	background-color: tomato;
	border: 1px solid black;
	width: 100px;
	height: 100px;
	padding: 5px;
	margin: 50px 10px;
}
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Aliquam tortor turpis, convallis eget suscipit vel, eleifend
  tincidunt orci. Quisque ac.</p>
<span class="box">CAJA 1</span>
<a class="box" href="#">CAJA 2</a>
<span class="box">CAJA 3</span>
<em class="box">CAJA 4</em>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Aliquam tortor turpis, convallis eget suscipit vel, eleifend
  tincidunt orci. Quisque ac.</p>

    正如我们所看到的，所有的 X Box 都有 inline 属性（尽管没有在 CSS 中定义）并且它们彼此对齐，但不考虑宽度、高度和更少的垂直边距。

    块或块元素

    相反，有块元素不与其余元素混合，以独立的“线”显示。

    HTML定义的块元素有：address、blockquote、center、dir、div、dl、fieldset、form、h1、h2、h3、h4、h5、h6、hr、isindex、menu、noframes、noscript、ol、p、 pre, table, ul, dd, dt, frameset, li, tbody, td, tfoot, th, thead, tr。

    回到相同的场景，但将内联元素更改为块元素，我们将得到以下结果：

    .box {
	background-color: tomato;
	border: 1px solid black;
	width: 100px;
	height: 100px;
	padding: 5px;
	margin: 50px 10px;
}
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Aliquam tortor turpis, convallis eget suscipit vel, eleifend
  tincidunt orci. Quisque ac.</p>
<div class="box">CAJA 1</div>
<h6 class="box">CAJA 2</h6>
<div class="box">CAJA 3</div>
<pre class="box">CAJA 4</pre>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Aliquam tortor turpis, convallis eget suscipit vel, eleifend
  tincidunt orci. Quisque ac.</p>

    正如我所提到的，现在块元素显示在独立的“行”中，但最重要的是，它们已经考虑了宽度、高度和垂直边距。

    内联块或内联块元素

    我们刚刚看到了块元素和内联元素，现在是时候继续使用 inline-block 元素了。

    这个元素是两者的混合，能够对齐但也尊重高度、宽度和垂直边距。

    .box {
    display: inline-block;
	background-color: tomato;
	border: 1px solid black;
	width: 100px;
	height: 100px;
	padding: 5px;
	margin: 50px 10px;
}
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Aliquam tortor turpis, convallis eget suscipit vel, eleifend
  tincidunt orci. Quisque ac.</p>
<span class="box">CAJA 1</span>
<a class="box" href="#">CAJA 2</a>
<span class="box">CAJA 3</span>
<em class="box">CAJA 4</em>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Aliquam tortor turpis, convallis eget suscipit vel, eleifend
  tincidunt orci. Quisque ac.</p>

    • 11