WEB入门.六 盒子模型
学习内容
CSS盒子模型
盒子之间的关系
页面元素定位
能力目标
理解盒子模型
理解内容与表现分离的优点
理解并掌握盒子之间的关系
理解并掌握绝对定位与相对定位的用法
本章简介
上一章节中已经讲解了页面布局的基础知识，了解了设计一个标准的 XHTML页面需要遵循的规范，例如：标签需要关闭、使用 id 属性代替 name 属性、属性值需要使用双引号等。另外，上一章内容讲解了 XHTML 基本标签的用法。
页面是 Web 站点与用户交互的接口，它能够引起用户对 Web 的兴趣并且加入自己电脑的夹。为达到这一目的，页面设计需要注意两点：页面布局设计和页面的内容设计。页面布局的效果将直接影响用户浏览的视觉体验。
本章内容将详细讲解布局设计的基本原理，包括布局设计模型、背景特效、元素定位、导航栏等。其次，本章内容涉及网页布局设计的基础模型——盒子模型。盒子模型的概念来源于生活中的物品装箱原理，可以通过盒子模型划分页面中的板块，重点在于讲解盒子模型中常用的定位方式：绝对定位、相对定位、静态定位、浮动定位。最后，本章将讲解页面中如果存在多个盒子，应该如何理解它们之间的关系。
核心技能部分
2.1 盒子模型概述
传统的网页一般采用table布局，将内容与页面效果混杂在一起，导致页面代码冗余，布局结构不清晰，不易于网站版面修改。基于div + css 布局技术的盒子模型的出现替代了传统的 table表格嵌套，它不但弥补了table布局的缺陷，而且在页面加载速度和搜索引擎的支持方面有显著的改善。
2.1.1 内容与表现的分离
1. 什么是内容与表现
网页设计的一个重要概念是保证页面内容和表现分离。其中内容是页面实际要传达给用户的信息 (包含数据、文档、图片等)，指纯粹的数据信息，不包含任何辅助信息 (如颜色、字体大小、背景等)；表现是指内容的修饰性部分，例如标题字体的大小、背景、颜色等。
2. 如何实现内容与表现分离
假设p是块状标签，现在须使某段落右缩进2个字高的大小，很多人通常在段落前加空格，而后不断重复该动作。如果给p标签指定一个CSS样式：p {text-indent：2em;}，在没有外加任何表现控制标签的情况下，body内容部分显示如下：
如果该段落另需修饰字体、字号、背景、行距等，只需要将对应 CSS样式属性加进p样式中。
以上代码将内容和表现混合在一起。DIV + CSS设计布局的思路遵循内容与表现分离的原则。
实现步骤如下：
（1） 使用DIV定义语义结构，其中只添加网页的内容，如文字、图片等。
（2） 使用 CSS美化网页，如加入背景、线条边框、对齐属性等。
3. 内容与表现分离的优势
（1） 网页文件代码量小，可被快速下载。
（2） 数据显示多样化，不同的样式表适应不同的设备，其内容与设备无关。
（3） 整个站点的视觉效果一致，修改样式表即可轻松实现网站改版。
（4） 页面结构简洁，数据的集成、更新和处理更为方便灵活。
（5） 便于搜索引擎的搜索。
2.1.2 盒子的结构
在CSS中，所有的网页元素都被看作一个矩形框，或者是元素框。盒子模型描述了元素在网页布局中所占的空间和位置。现实生活中的盒子是一个常见物品，如我们到商场买礼品，售货员会先用一个箱子将礼品装好。为防止礼品在运输过程中损坏，再用一些泡沫型材料隔在礼品与箱子之间。这就是一个最典型的盒子，如图 2.1.1 所示。
图2.1.1 生活中的盒子
网页设计将生活中装箱子的做法抽象成页面设计模型——盒子模型。在CSS 中，一个独立的盒子模型由 content (内容)、border (边框)、padding (内边距)、margin (外边距)四部分构成，如图 2.1.2所示。
图2.1.2 盒子模型
盒子模型是CSS 中一个重要的概念，理解了盒子模型才能更好地排版。盒子模型分为 标准W3C盒子模型和IE 盒子模型两种。
1. 标准W3C盒子
标准W3C 盒子模型的范围包括 margin、border、padding、content，且 content部分不包含 border和 padding，如图 2.1.3所示。
图2.1.3 标准W3C盒子
2. IE盒子
IE 盒子模型的范围同样包括margin、border、padding、content，它与标准 W3C 盒子模型的区别在于，IE 盒子模型的 content部分包含了 border 和 padding，如图 2.1.4所示。
2.1
一个盒子的 margin 为20px，border 为1px，padding 为 10px，content 的宽度为200px、高为 50px。
标准W3C 盒子模型，盒子需要占据的位置为：
宽：20*2 + 1*2 +10*2 + 200 = 262px
高：20*2 + 1*2 +10*2 + 50=112px;
盒子的实际大小为：
宽：1*2 + 10*2 + 200= 222px
高：1*2 + 10*2 + 50=72px;
IE盒子模型，盒子占据的位置为：
宽：20*2 + 200 =240px
高：20*2 + 50 =90px;
盒子的实际大小为：宽 200px、高 50px。
设计师设计页面时，如果在页面顶部没有加 DOCTYPE 声明，那么浏览器会根据自己的行为理解网页，即 IE 浏览器会采用 IE 盒子模型解释设计师的盒子。而 Firefox采用标准 W3C 盒子模型解释盒子，所以网页在不同浏览器中的显示效果不一致。反之，如果添加 DOCTYPE 声明，那么所有浏览器都会采用标准W3C 盒子模型去解释盒子，网页在各浏览器中显示效果将变得一致。
2.1.3 盒子之间的关系
在设计网页时，如果只针对一个盒子，可以很轻松地运用上述知识。但实际网页设计中会遇到大量的盒子，所以只有理解盒子之间的关系才能适应各种复杂的布局需求。
1. 水平盒子
当两个盒子同行显示时，其距离为 BOXI 的 margin-right和 BOX2 的 margin-left之和，如图 2.1.5所示。
图2.1.5 水平盒子的距离
2. 垂直盒子
当两个盒子在垂直显示时，其距离为 BOXI 的margin-bottom和 BOX2 的 margin-top 中较大者，而不是两者之和。
2.2