前端学习---HTML---块元素和行内元素

在HTML中，元素根据其默认的显示方式可以分为块级元素（Block-level Elements）和行内元素（Inline Elements）。它们的主要区别在于布局行为、默认样式以及能否包含其他元素。

1、块级元素（Block-level Elements）

独占一行：默认情况下，块级元素会占据其父容器的整个宽度，前后会自动换行。

可设置宽高：可以通过CSS设置width、height、margin、padding等属性。

可包含其他块级或行内元素：通常作为容器使用（如
、

等）。

默认对齐方式：垂直方向堆叠（从上到下）。

bash 复制代码

<div>、<p>、<h1>-<h6>、<ul>/<ol>/<li>、<section>、<article>、<header>、<footer>、<form>、<table>、<hr>、<blockquote>

示例：

bash 复制代码

<div style="background: lightblue; width: 200px; height: 100px;">
  这是一个块级元素（div）
</div>
<p>这是另一个块级元素（p），会显示在新的一行。</p>

不换行：默认与其他行内元素在同一行显示，直到行宽不足时才换行。

不可直接设置宽高：width和height无效，大小由内容决定（但可通过padding或line-height间接调整）。

只能包含文本或其他行内元素：不能包含块级元素（如<a>中不能直接放<div>）。

默认对齐方式：水平方向排列（从左到右）。

bash 复制代码

<span>、<a>、<strong>、<em>、<img>、<input>、<button>、<label>、<code>、<sub>、<sup>、<br>

示例

bash 复制代码

<span style="background: yellow; padding: 5px;">行内元素1</span>
<span style="background: pink; padding: 5px;">行内元素2（同一行显示）</span>

混合特性：兼具行内元素（不换行）和块级元素（可设宽高）的特点。

常见元素：<img>、<input>、<button>默认是inline-block。

通过CSS设置：任何元素可通过display: inline-block;转换为行内块。

示例：

bash 复制代码

<span style="display: inline-block; width: 50px; height: 50px; background: gray;"></span>
<span>行内块元素可以设宽高且不换行。</span>