在HTML中，元素可以分为块级元素（Block-level elements）和内联元素（Inline elements）。这两类元素在页面布局和样式应用上有不同的特点和用途。
一、块级元素（Block-level elements）
1. 定义
块级元素在页面上以块的形式显示，通常会独占一行，其宽度默认为父容器的宽度。
2. 特点
- 独占一行：块级元素会在新行开始，并且其后的元素也会在新行开始。
- 宽度和高度：可以设置宽度（
width）和高度（height）。 - 内边距和外边距：可以设置内边距（
padding）和外边距（margin）。
3. 常见的块级元素
<div>：通用的块级容器，用于布局。<p>：段落。<h1>到<h6>：标题。<ul>、<ol>、<li>：列表。<table>：表格。<form>：表单。
4. 示例
<div style="background-color: lightblue; padding: 20px;">
<h1 style="color: blue;">欢迎来到我的网站</h1>
<p style="color: green;">这是一个段落文字。</p>
</div>
二、内联元素（Inline elements）
1. 定义
内联元素在页面上以行内形式显示，不会独占一行，其宽度由内容决定。
2. 特点
- 行内显示：内联元素不会独占一行，与前后元素在同一行显示。
- 宽度和高度：宽度由内容决定，不能直接设置宽度和高度。
- 内边距和外边距：可以设置垂直方向的内边距（
padding-top、padding-bottom）和外边距（margin-top、margin-bottom），但水平方向的内边距和外边距可能不会按预期工作。
3. 常见的内联元素
<span>：通用的内联容器，用于样式控制。<a>：超链接。<img>：图像。<strong>：加粗文本。<em>：强调文本。<input>：表单输入框。
4. 示例
<p>这是一个<a href="https://www.example.com" style="color: red;">链接</a>示例。</p>
<span style="background-color: yellow;">这是一个内联元素。</span>
三、块级元素与内联元素的转换
1. 使用CSS控制显示方式
可以通过CSS的display属性来改变元素的显示方式。
display: block;：将内联元素转换为块级元素。display: inline;：将块级元素转换为内联元素。display: inline-block;：将内联元素转换为块级元素，但允许与其他元素在同一行显示。
2. 示例
<span style="display: block; background-color: lightblue;">这是一个显示为块级的内联元素。</span>
<div style="display: inline; background-color: lightgreen;">这是一个显示为内联的块级元素。</div>
四、总结
- 块级元素：独占一行，可以设置宽度和高度，适用于布局和需要独占空间的元素。
- 内联元素：与前后元素在同一行显示，宽度由内容决定，适用于文本和小部件。
- 转换显示方式：通过CSS的
display属性可以灵活地改变元素的显示方式，实现更复杂的布局需求。