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

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

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

1.1、特点

独占一行：默认情况下，块级元素会占据其父容器的整个宽度，前后会自动换行。
可设置宽高：可以通过CSS设置width、height、margin、padding等属性。
可包含其他块级或行内元素：通常作为容器使用（如

1.2、常见块级元素

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

示例：

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

2、 行内元素（Inline Elements）

2.1、特点

不换行：默认与其他行内元素在同一行显示，直到行宽不足时才换行。
不可直接设置宽高：width和height无效，大小由内容决定（但可通过padding或line-height间接调整）。
只能包含文本或其他行内元素：不能包含块级元素（如<a>中不能直接放<div>）。
默认对齐方式：水平方向排列（从左到右）。

2.2、常见行内元素

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

示例

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

3、特殊情况：行内块元素（Inline-block）

混合特性：兼具行内元素（不换行）和块级元素（可设宽高）的特点。
常见元素：<img>、<input>、<button>默认是inline-block。
通过CSS设置：任何元素可通过display: inline-block;转换为行内块。
示例：

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