3.1 定义Div

Div与其他HTML标签一样，是一个HTML所支持的标签。例如，当制作一个列表时，应用<ol></ol>这样的结构，Div在使用时同样也是以<div></div>的形式出现。

3.1.1 什么是Div

Div是HTML中指定的标签，专门用于布局设计的容器对象。Div可以定义文档中的分区或节（division/section），也可以把文档分隔为独立的、不同的部分。它可以被用作严格的组织工具，并且可以不与任何格式关联。

Div是一个容器，能够放置内容，例如：

在HTML页面中的每个标签对象几乎都可以称得上是一个容器，如p段落标签对象，这里p作为一个容器，其中可以放入内容：

接下来学习一种布局方式，即CSS布局方式，Div是这种布局方式的核心对象，使用CSS布局的页面不需要依赖任何其他标签。仅从Div的使用上来说，进行一个简单的布局只需要Div与CSS，因此也可以称为Div+CSS布局。

3.1.2 插入Div

与其他HTML对象一样，只需在代码中应用<div></div>标签形式，将内容放置其中，便可以应用Div。

提示

Div只是一个标识，作用是把内容标识为一个区域，并不负责其他事情，Div只是CSS布局工作的第一步，需要通过Div将页面中的内容元素标识出来，而为内容添加样式则由CSS来完成。

除了可以在Div中直接放入文本和其他标签，还可以将多个Div进行嵌套使用，最终的目的是合理地标识出页面中的区域。

使用Div同使用其他HTML标签一样，可以加入其他属性，如id、class、align、style等，而在CSS布局方面，为了实现表现与内容的分离，不应当将对齐属性align、行间样式表属性style编写在HTML页面的Div中，因此，Div代码只可能拥有以下两种形式：

使用id属性，可以为当前这个Div指定一个id名称，在CSS中使用id选择符进行样式编写。同样，可以使用class属性，在CSS中使用class选择符进行样式编写。

提示

在当前HTML页面中，同一个id名称只允许使用一次，而class名称则可以重复使用。

在一个没有应用CSS的页面中，即使应用了Div，也没有任何实际效果，就如同直接输入了Div中的内容一样，那么该如何理解Div在布局上所带来的不同呢？

使用Div布局页面，编写代码如下：

此时预览仅能看到出现了两行文字，并没有看出Div的任何特征，显示效果如图3-1所示。

从图3-1中可以看出，Div对象本身就是占据整行的一种对象，不允许其他对象与它在一行中并列显示，实际上，Div就是一个块状（block）对象。

提示

HTML中的所有对象几乎都默认为以下两种类型。

（1）block（块状）对象：指的是当前对象显示为一个方块，默认的显示状态下将占据整行，其他对象在下一行显示。

（2）in-line（行间）对象：正好和block对象相反，它允许其他对象与它在同一行中显示。

Div在页面中并非用于类似于文本的行间排版，而是用于大面积、大区域的块状排版。另外，从页面的效果中发现，网页中除文字之外没有任何其他效果，两个Div之间只是前后关系，因此可以说，Div本身与样式没有任何关系，样式需要通过CSS来实现，从本质上实现了Div与样式分离。

提示

这样做的好处：Div与样式分离，最终样式由CSS来完成。这样的与样式无关的特性，使得Div在设计中拥有巨大的可伸缩性，设计师可以根据自己的想法改变Div的样式，不再受单元格固定模式的束缚。

因此，在CSS布局中需要做的工作可以简单归结为两个步骤：首先使用Div将内容标记出来，其次为这个Div编写合适的CSS规则代码。

3.1.3 Div的嵌套和固定格式

Div可以进行多层嵌套使用，嵌套的目的是实现更为复杂的页面排版，如当设计一个网页时，首先需要有整体布局，将页面分为顶部、中部和底部，这也许会产生一个复杂的Div结构：

在上段代码中，为每个Div定义了id名称以供识别，可以看到id名称为top、main和bottom的3个对象属于并列关系。在网页的布局结构中，如果以垂直方向布局为例，该段代码代表如图3-2所示的一种布局关系。

由于内容需要，有可能在main中使用左、右栏的布局，因此在main中增加了两个id名称分别为left与right的对象，这两个对象是并列关系。因此它们与main形成了一种嵌套关系，如果left和right被样式控制为左右显示，那么它们最终的布局关系应如图3-3所示。

网页布局由这些嵌套着的Div构成，无论多么复杂的布局方法，都可以通过Div之间的并列与嵌套关系来实现。