4.2 容器的作用
在介绍更多的CSS样式之前，我们先来看两个特别重要的标签，它们在HTML中出现的频率非常高。
容器，顾名思义，就是用来存放物品的。在网页中，容器就是用来设置网页内容的，但不同之处是它自身是不可见的。就是说，如果容器中不放任何内容，你将根本意识不到它的存在。但是，它又是存在的，它的存在是以一种块标记的格式出现，也就是它规定了它内部的标签内容与前后元素之间有一定的间距。
本节介绍两个特殊的容器标签：＜div＞和＜span＞。它们的特殊性在于自身没有继承任何样式，但可以使用CSS定义任何需要的样式。＜div＞标签表示内容块，前后都有换行；＜span＞标签在一行内使用，是段落的一部分。
4.2.1 两个最常用的容器：div和span
图4.5给出了div和span这两个容器的实例。span和div标签都包裹着文字，根据文字的宽度和高度不同，可以想象成这些文字被一个隐形的盒子包围着（图4.5中隐形的含义用虚线表示。），这个盒子就是容器。这两个标签与其他HTML标签不同，它们没有实际的意义，只是为了配合CSS为其内部的内容定义显示的规则。
图4.5
特别说明
span和div作为容器元素还是有一定区别的。
其中，span用于控制在一行内元素的样式，span容器的宽度会随包裹内容的长度而改变，内容少，则宽度小，内容多，则宽度大。
div则用于控制一块区域的整体样式。div容器的宽度默认是占满整个页面的宽度（由显示器的宽度决定），无论每一个段落文字是否占满一行，div的宽度都是一样的，就是撑满整个页面。另外，它内部的文字默认是靠左对齐的。
思考时间
基于以上特性，如果你想要给一大段文字中的个别词语添加特殊样式，你觉得应该用哪一个容器呢？如果你想给整个段落设置一个样式，又应该用哪一个呢？想好了之后，来看一个具体案例。
4.2.2 容器的实际应用：添加样式
任务描述：对雷雨的介绍文字添加样式，效果如图4.6所示。从现在开始，我们使用HBuilderX，这么做是为了减轻你记忆标签和属性的负担。
图4.6
操作步骤：打开HBuiderX，新建一个HTML页面，取名为css_container.html，输入主体代码如图4.7所示，用Chrome浏览器打开并查看效果。
图4.7
代码解析：通过在标签对的开始标签内部添加了控制样式的属性，关键字是style，其中定义了以下样式：
（1）margin：0 auto；让元素本身自动水平居中，这里它应用在最外层的div容器，使用这个样式时，一定要同时指定div宽度属性；否则，div默认只会撑满整个屏幕，看不出居中的效果。注意，这个样式很有用，一般就是默认放在最外层元素（比如body，div）样式定义中，这样可以让整个页面具有一定的宽度，且居中显示；
（2）width：960px/80％；元素宽度的取值可以是px，也可以是百分数，它表示整个宽度的百分比；
（3）color：#808080；设置所有的文字颜色为灰色；
（4）text-align：center；让标签内部的元素水平居中对齐。注意：text-align常用于控制块级元素包裹的内部元素居中对齐，它对内联元素或行内元素（img、a、b、span等）本身无效，因此如果你想让某个内联元素居中显示，一定要将text-align属性放在一个块级元素中，比如p、div等。具体见如下代码：
（5）font-size：24px;设置文字的大小为24像素；
（6）background-color：red/#3388ff；设置元素的背景颜色，可以采用颜色的英文单词，或者采用6位十六进制数，这个值不需要记忆，可以通过屏幕拾色器工具来自动获取任意网页中现有的颜色，建议自行下载小工具。
容器样式的使用秘籍
如果雷雨的第一行用＜p＞标签，那么背景颜色将适用于整个第一行，而不是任务中的“雷雨”两个字。＜h1＞标签的效果同＜p＞一样，也是独立一行。因此，＜span＞的特殊意义就在于可以只对其包裹的内容给出特殊样式。另外，＜div＞在Web开发中也经常使用，它们主要用于做大段落元素的整体页面布局，更重要的用法是，利用嵌套的div精准地定义样式和控制布局。
4.2.3 CSS样式的基本用法
上一节的案例中提到了一种定义样式的基本用法，即在HTML标签中，样式的定义方法为：
其中，样式声明的属性关键字是style，跟在其后的是样式声明，其位置是在开始标签的内部。每一个声明由一个属性和一个值组成（属性：值）。如果有多个样式声明，则采用“；”隔开。最终的效果就是为该标签代表的元素声明了CSS样式。这只是一种声明样式的方式，不是很推荐，后面还会介绍更多的常用方式。
不算错误的bug
由于CSS没有特别严谨的语法规范，所以无论最后一个属性样式声明是否以；结尾都不会报错。浏览器会在解析样式时表现出一定的大度性，直接忽略这种小错误。但是，为了谨慎起见，参考其他严谨的编程语言，比如JavaScript，对于元素内声明的样式属性，最后一个不要加“;”。