在HTML中，元素可以分为两大类：行内元素（Inline Elements）和块级元素（Block-level Elements）。它们的主要区别在于它们的默认显示行为和布局方式。
行内元素（Inline Elements）
行内元素在页面中以行的形式显示，不会独占一行，而是与其他行内元素共享一行。行内元素的宽度和高度由其内容决定，不会自动换行。常见的行内元素包括：
<span><a><strong><em><img><input><label><button><select><textarea>
特点：
- 不会独占一行，与其他行内元素共享一行。
- 宽度和高度由内容决定。
- 不能设置
width和height属性（除非使用display: inline-block或display: block）。 - 可以设置
padding和margin，但margin只影响左右，不影响上下。
块级元素（Block-level Elements）
块级元素在页面中以块的形式显示，每个块级元素会独占一行，并且会自动换行。块级元素的宽度和高度可以由CSS设置，默认情况下宽度会占满父容器的宽度。常见的块级元素包括：
<div><p><h1>到<h6><ul><ol><li><table><form><header><footer><section>
特点：
- 独占一行，自动换行。
- 宽度和高度可以由CSS设置。
- 默认情况下，宽度会占满父容器的宽度。
- 可以设置
padding、margin、width和height属性。
示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内元素与块级元素示例</title>
<style>
.inline {
background-color: lightblue;
}
.block {
background-color: lightgreen;
}
</style>
</head>
<body>
<span class="inline">这是一个行内元素</span>
<span class="inline">这是另一个行内元素</span>
<div class="block">这是一个块级元素</div>
<div class="block">这是另一个块级元素</div>
</body>
</html>
解释
- 行内元素
<span>不会独占一行，而是与其他行内元素共享一行。 - 块级元素
<div>会独占一行，并且会自动换行。
通过理解行内元素和块级元素的区别，你可以更好地控制页面的布局和样式。
