1. 背景介绍
在HTML中，有两种主要的元素类型：块级元素和行内元素（也被称为内联元素）。对于前端开发者来说，了解块级元素和行内元素的区别和用法是非常重要的。
2. 块级元素
块级元素是指在HTML中以块的形式呈现的元素。它们通常会独占一行，并且会在前后添加额外的空白行。常见的块级元素包括<div>、<p>、<h1>到<h6>等。
块级元素的特点：
独占一行
默认情况下，宽度会填满父容器
可以设置宽度、高度、内边距和外边距
可以容纳其他块级元素和行内元素
3. 行内元素（内联元素）
行内元素是指在HTML中以文本的形式呈现的元素。它们通常不会独占一行，而是与其他元素在同一行中显示。常见的行内元素包括<a>、<span>、<strong>等。
行内元素的特点：
与其他元素共享同一行
默认情况下，宽度由内容决定
无法设置宽度、高度、内边距和外边距（部分属性可以通过CSS设置）
不能容纳块级元素，只能容纳其他行内元素
4. 区别和联系
块级元素和行内元素之间有一些明显的区别，同时也存在一些联系。
4.1. 区别
最主要的区别在于它们的呈现方式和默认属性的不同。
块级元素会独占一行，宽度会填满父容器，可以设置宽度和高度，以及其他CSS属性。行内元素不会独占一行，宽度由内容决定，无法设置宽度和高度，在默认情况下无法设置内边距和外边距。
4.2. 联系
尽管块级元素和行内元素有很多不同之处，但它们也有一些共同点。
首先，块级元素和行内元素都可以通过CSS来改变其默认属性。例如，可以使用CSS设置行内元素的宽度、高度和边距。
另外，块级元素和行内元素可以相互嵌套。块级元素可以包含其他块级元素和行内元素，而行内元素只能包含其他行内元素。
5. 示例代码
以下是一些使用CSS设置块级元素和行内元素样式的示例代码：
5.1. 设置块级元素样式
div {
width: 200px;
height: 100px;
background-color: #f1f1f1;
margin: 10px;
padding: 10px;
}
5.2. 设置行内元素样式
span {
color: red;
font-weight: bold;
padding: 5px;
}
6. 总结
本文介绍了块级元素和行内元素的区别和联系。块级元素在HTML中以块的形式呈现，会独占一行，并且可以设置宽度、高度和其他CSS属性。行内元素以文本的形式呈现，与其他元素共享同一行，并且无法设置宽度和高度（部分属性可以通过CSS设置）。尽管块级元素和行内元素有很多不同之处，但它们也可以相互嵌套，并且都可以通过CSS来改变其默认属性。