解析div与span区别与用法

div

div 是块级元素，通常用于包裹一段独立的内容，例如网页中的段落、标题、图片、表格等。

div 的特点是：
- 默认情况下，它会将它内部的内容从上到下全部显示出来；
- 它可以设置自身的宽度、高度、背景颜色、边框等样式；
- 它可以通过 CSS 属性设置布局方式，例如居中放置、浮动、定位等。

示例一：下面是一段 HTML 代码，使用 div 包裹了一段文字：

<div>
  <p>这是一段文字内容</p>
</div>

示例二：下面是一段 CSS 代码，设置了一个类名为 box 的 div 元素的样式：

.box {
  width: 200px;
  height: 100px;
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  margin: 0 auto;
}

span

span 是行内元素，通常用于包裹一段文本或者一个行内元素，例如网页中的文字、链接、图片等。

span 的特点是：
- 默认情况下，它只会将它内部的内容占据一行，不会换行；
- 它可以设置自身的颜色、字体大小、字形等样式；
- 它可以作为 div 中某个区域的局部样式，例如高亮某个单词或者链接。

示例一：下面是一段 HTML 代码，使用 span 包裹了一个单词：

这是一段 <span style="color: red;">高亮</span> 的文字内容

示例二：下面是一段 CSS 代码，设置了一个类名为 highlight 的 span 元素的样式：

.highlight {
  color: red;
  font-weight: bold;
}

在实际开发中，div 和 span 通常会配合使用，来控制网页的布局和样式。例如，我们可以使用 div 将网页分成若干个大块区域，再使用 span 针对每个小区域进行局部样式修改。