HTML中的块级元素、行内元素和行内块元素

原文链接《HTML中的块级元素、行内元素和行内块元素》

在HTML中，元素根据其默认的显示行为可以分为块级元素（block-level elements）、行内元素（inline elements）和行内块元素（inline-block elements）。这些分类主要影响元素在页面上的布局和与其他元素的关系。

块级元素（Block-level Elements）

块级元素在页面中以块的形式展现，它们通常会新起一行，并且会尽可能地占据其父容器的整个宽度。块级元素可以包含其他块级元素和行内元素。

特点：

• 默认情况下，宽度会自动填满其父容器的宽度。
• 可以设置宽度（width）、高度（height）、内边距（padding）、外边距（margin）等属性。
• 会自动换行，每个块级元素通常从新的一行开始。

常见的块级元素：

• <div>​
• <p>​
• ​​<h1>​ 到 ​<h6>​
• <ul>​、​<ol>​、​<li>​
• ​​<form>​
• ​​<section>​、​<article>​、​<header>​、​<footer>​、​<nav>

行内元素（Inline Elements）

行内元素不会新起一行，它们只占据必要的宽度，不会影响其前后元素的布局。行内元素通常用于包裹文本或其他行内元素。

特点：

• 不会自动换行，多个行内元素可以在同一行内显示。
• 不能直接设置宽度（width）和高度（height），除非通过CSS改变其显示类型。
• 可以设置水平内边距（padding）和外边距（margin），但垂直内边距和外边距不会影响周围元素的布局。

常见的行内元素：

• ​​<span>​
• ​​<a>​
• ​​<strong>​、​<em>​
• ​​<br>​
• ​​<img>​
• <input>​、​<label>​
• <button>

行内块元素（Inline-block Elements）

行内块元素结合了块级元素和行内元素的特点。它们像行内元素一样不会新起一行，但可以像块级元素一样设置宽度和高度。

特点：

• 不会自动换行，多个行内块元素可以在同一行内显示。
• 可以设置宽度（width）、高度（height）、内边距（padding）、外边距（margin）等属性。
• 默认情况下，它们只占据内容的宽度，不会像块级元素那样占据整个父容器的宽度。

常见的行内块元素：

• ​​<img>​（默认情况下是行内块元素）
• ​​<input>​
• ​​<button>​
• <select>

设置元素的显示类型

可以使用 ​display​属性来设置元素的显示类型，从而控制它们是块级元素、行内元素还是行内块元素。以下是如何通过CSS设置这些显示类型的方法：

设置块级元素

默认情况下，某些HTML元素（如 ​<div>​、​<p>​、​<h1>​到 ​<h6>​等）就是块级元素。如果你想将其他元素设置为块级元素，可以使用以下CSS：

.block-element {
  display: block;
}

设置行内元素

默认情况下，某些HTML元素（如 ​<span>​、​<a>​、​<strong>​等）就是行内元素。如果你想将其他元素设置为行内元素，可以使用以下CSS：

.inline-element {
  display: inline;
}

设置行内块元素

默认情况下，某些HTML元素（如 ​<img>​、​<input>​、​<button>​等）就是行内块元素。如果你想将其他元素设置为行内块元素，可以使用以下CSS：

.inline-block-element {
  display: inline-block;
}

假设你有以下HTML结构：

<div class="container">
  <span class="block-element">This is a block element</span>
  <a class="inline-element">This is an inline element</a>
  <button class="inline-block-element">This is an inline-block element</button>
</div>

可以使用以下CSS来设置这些元素的显示类型：

.block-element {
  display: block;
  background-color: lightblue;
  padding: 10px;
  margin: 10px 0;
}

.inline-element {
  display: inline;
  background-color: lightgreen;
  padding: 5px;
}

.inline-block-element {
  display: inline-block;
  background-color: lightcoral;
  padding: 10px;
  margin: 10px;
}

• .block-element​：被设置为块级元素，因此它会占据其父容器的整个宽度，并且会新起一行。
• .inline-element​：被设置为行内元素，因此它只会占据必要的宽度，并且不会新起一行。
• .inline-block-element：​被设置为行内块元素，因此它只会占据必要的宽度，但可以设置宽度和高度，并且不会新起一行。