<div>和<span>标签

为了更好地理解“块元素”和“行内元素”，下面将详细介绍在CSS布局的页面中经常使用的块元素<div>和行内元素<span>。

1. <div>

div英文全称为“division”，译为中文是“分割、区域”。<div>标签简单而言就是一个块标签，可以实现网页的规划和布局。在HTML文档中，页面会被划分为很多区域，不同区域显示不同的内容，如导航栏、banner、内容区等，这些区块一般都通过<div>标签进行分隔。

可以在div标签中设置外边距、内边距、宽和高，同时内部可以容纳段落、标题、表格、图像等各种网页元素，也就是说大多数HTML标签都可以嵌套在<div>标签中，<div>中还可以嵌套多层<div>。<div>标签非常强大，通过与id、class等属性结合设置CSS样式，可以替代大多数的块级文本标签。

注意：

1、<div>标签最大的意义在于和浮动属性float配合，实现网页的布局，这就是常说的DIV+CSS网页布局。对于浮动和布局这里了解即可，后面的章节将会详细介绍。

2、<div>可以替代块级元素如<h>、<p>等，但是它们在语义上有一定的区别。例如<div>和<h2>的不同在于<h2>具有特殊的含义，语义较重，代表着标题，而<div>是一个通用的块级元素，主要用于布局。

2. <span>

span中文译为“范围”，作为容器标签被广泛应用在HTML语言中。和<div>标签不同的是，<span>是行内元素，仅作为只能包含文本和各种行内标签的容器，如加粗标签<strong>、倾斜标签<em>等。<span>标签中还可以嵌套多层<span>。

<span>标签常用于定义网页中某些特殊显示的文本，配合class属性使用。<span>标签本身没有结构特征，只有在应用样式时，才会产生视觉上的变化。当其他行内标签都不合适时，就可以使用<span>标签。

需要注意的是，<div>标签可以内嵌<span>标签，但是<span>标签中却不能嵌套<div>标签。可以将<div>和<span>分别看做是一个大容器和小容器，大容器内可以放下小容器，但是小容器内却放不下大容器。