Div+CSS布局技术

5.2 CSS盒模型
5.2.4 外边距的叠加
外边距合并是指当两个垂直外边距相遇时，它们将形成 一个外边距。合并后的外边距高度等于两个发生合并的外边 距的高度中的较大者。
1．两个元素垂直相遇时叠加
当两个元素垂直相遇时，第一个元素的下外边距与第二 个元素的上外边距会发生叠加合并，合并后的外边距的高度 等于这两个元素的外边距值的较大者。
网页设计与制作教程第5版
机械工业出版社同名教材 配套电子教案
第5章 Div+CSS布局技术
5.1 Div布局理念 5.2 CSS盒模型 5.3 盒子的定位 5.4 盒子的浮动 5.5 CSS常用布局样式 5.6 实训——什锦果园水果沙拉页面的布局
5.1 Div布局理念
5.1.1 Div布局页面的优点
（a）块级元素宽度不够时的状态 （b）块级元素宽度不够且不同高度的浮动元素
5.4 盒子的浮动
5.4.2 清除浮动
在页面布局时，当容器的高度设置为auto且容器的内容 中有浮动元素时，容器的高度不能自动伸长以适应内容的高 度，使得内容溢出到容器外面导致页面出现错位，这个现象 称为浮动溢出。为了防止这个现象的出现而进行的CSS处理， 就叫清除浮动。
5.6 实训——什锦果园水果沙拉页面的布局
5.6.2 页面的制作过程 1．前期准备 （1）栏目目录结构 在栏目文件夹下创建文件夹images和css，分别用来存放图 像素材和外部样式表文件。 （2）页面素材 将本页面需要使用的图像素材存放在文件夹images下。 （3）外部样式表 在文件夹css下新建一个名为style.css的样式表文件。
5.2 CSS盒模型
5.2.2 盒模型的属性
3．内边距
内边距也称内补丁，位于对象边框和对象之间，包括了 4 项 属 性 ： padding-top （ 上 内 边 距 ） 、 padding-right （ 右 内 边 距 ） 、 padding-bottom （ 下 内 边 距 ） 、 padding-left （左内边距），内边距属性不允许负值。与外边距类似，内 边距也可以用padding一次性设置所有的对象间隙，格式也 和margin相似，这里不再一一列举。
5.2 CSS盒模型
5.2.2 盒模型的属性
2．边框
常 用 的 边 框 属 性 有 7 项 ： border-top 、 border-right 、 border-bottom 、 border-left 、 border-width 、 bordercolor 、 border-style 。 其 中 border-width 可 以 一 次 性 设 置 所有的边框宽度，border-color同时设置四面边框的颜色时， 可以连续写上4种颜色，并用空格分隔。上述连续设置的边框 都 是 按 border-top 、 border-right 、 border-bottom 、 border-left的顺序（顺时针）。
【演练5-3】使用外边距（margin）属性实现某个分区的缩 进及位置的居中。
【演练5-4】文字垂直居中效果。
【演练5-5】使用内边距（padding）属性设置分区内容与边 框之间的距离。
5.2 CSS盒模型
5.2.3 盒模型的宽度与高度
盒模型的宽度与高度是元素内容、内边距、边框和外边 距这4部分的wk.baidu.com性值之和。
5.4 盒子的浮动
5.4.1 浮动
浮动（float）是使用率较高的一种定位方式。浮动元素 可以向左或向右移动，直到它的外边距边缘碰到包含块内边 距边缘或另一个浮动元素的外边距边缘为止。
语法：float : none | left |right
【演练 5-13】向右浮动的元素。本例页面5-13.html的布局的初始状态如图517（a）所示，元素box-1向右浮动后的结果如图5-17（b）所示。
2．两个元素包含时叠加
假设两个元素没有内边距和边框，且一个元素包含另一 个元素，它们的上外边距或下外边距也会发生叠加合并。
5.2 CSS盒模型
5.2.5 案例——制作网络鞋城关于页的局部信息 【演练5-6】使用盒模型技术修饰网络鞋城关于页的局部信息 ，通过设置边框和边距美化页面，本例文件5-6.html在浏览 器中显示的效果如图5-10所示。
1．盒模型的宽度
盒模型的宽度=左外边距（margin-left）+左边框（border-left） +左内边距（padding-left）+内容宽度（width）+右内边距（paddingright）+右边框（border-right）+右外边距（margin-right）
2．盒模型的高度
盒模型的高度=上外边距（margin-top）+上边框（border-top）+上 内边距（padding-top）+内容高度（height）+下内边距（paddingbottom）+下边框（border-bottom）+下外边距（margin-bottom）
5.3 盒子的定位
5.3.4 相对定位与绝对定位的混合使用
【演练 5-11】相对定位与绝对定位的混合使用。编写相应的CSS样式，生成 的文件5-9.html在浏览器中显示的效果如图所示。
5.3 盒子的定位
5.3.5 固定定位
固定定位（position:fixed;）其实是绝对定位的子类别。
【演练5-12】固定定位。为了对固定定位演示得更加清楚，将id="box1"的块 级元素进行固定定位，将id="box2"的块级元素的高度设置得尽量大，以便能看 到固定定位的效果。
盒模型将页面中的每个元素看做一个矩形框，这个框由 元素的内容、内边距（padding）、边框（border）和外边 距（margin）组成，如图5-3所示。对象的尺寸与边框等样 式表属性的关系，如图5-4所示。
5.2 CSS盒模型
5.2.2 盒模型的属性 1．外边距
外边距也称为外补丁。外边距设置属性有：margin-top、 margin-right、margin-bottom、margin-left，可分别设置， 也可以用margin属性，一次设置所有边距。
5.6 实训——什锦果园水果沙拉页面的布局
5.6.2 页面的制作过程 2．制作页面 （1）style.css （2）sarad.html的网页文件
习题5
1．制作如图5-34所示的两列固定宽度型布局。 2．制作如图5-35所示的三列固定宽度居中型布局。 3．使用相对定位的方法制作如图5-36所示的页面布局。 4．综合使用Div+CSS布局技术创建如图5-37所示的什锦
果园联系信息的局部页面。 5．综合使用Div+CSS布局技术创建如图5-38所示的网络
鞋城结算页面的局部信息。
5.5 CSS常用布局样式
5.5.2 三列布局样式
三列布局在网页设计时 更为常用，如图所示。 对于这种类型的布局， 浏览者的注意力最容易 集中在中栏的信息区域， 其次才是左右两侧的信 息。
5.6 实训——什锦果园水果沙拉页面的布局
5.6.1 页面布局规划
页面布局的首要任务是弄清网页的布局方式，分析版式 结构，待整体页面搭建有明确规划后，再根据成熟的规划切 图。通过成熟的构思与设计，什锦果园水果沙拉局部内容的 页面效果如图5-32所示，页面局部布局示意图如图5-33所示。
【演练5-8】静态定位。编写相应的CSS样式，生成的文件5-6.html在浏 览器中显示的效果如图5-12所示。
5.3 盒子的定位
5.3.2 相对定位
相对定位（position:relative;）指的是通过设置水平 或垂直位置的值，让这个元素“相对于”它原始的起点进行 移动。
【演练5-9】相对定位 。使用上面的示例深入讨论，将id="box"的块级元素向 下移动50px，向右移动50px。编写相应的CSS样式，生成的文件5-9.html的显 示效果如图5-15所示。
5.4 盒子的浮动
5.4.1 浮动 【演练5-14】向左浮动的元素。使用上面的示例继续讨
论，本例页面5-14.html的页面布局如图5-20（a）所示，所 有元素向左浮动后的结果如图5-20（b）所示。
5.4 盒子的浮动
5.4.1 浮动
【演练 5-15】空间不够时的元素浮动。使用上面的示例继续讨论，如果 id="box"的块级元素宽度不够，无法容纳3个浮动元素box-1、box-2和box-3并排 放置，那么部分浮动元素将会向下移动，直到有足够的空间放置它们，本例页面 5-15.html的显示效果如图5-19（a）所示。如果浮动元素的高度彼此不同，那么 当它们向下移动时可能会被其他浮动元素“挡住”，如图5-19（b）所示。
传统的HTML标签中，既有控制结构的标签（如<title> 标签和<p>标签），又有控制表现的标签（如<font>标签 和<b>标签），还有本意用于结构后来被滥用于控制表现的 标签（如<h1>标签和<table>标签）。页面的整个结构标 签与表现标签混合在一起。
相对于其他HTML继承而来的元素，Div标签的特性就是 它是一种块级元素，更容易被CSS代码控制样式。
5.3 盒子的定位
5.3.3 绝对定位
用“position:absolute;”表示绝对定位，使用绝对定 位的对象可以被放置在文档中任何位置，位置将依据浏览器 左上角的0点开始计算。
【演练5-10】绝对定位。继续使用上面的示例深入讨论，将id="box-1"的块级 元素进行绝对定位，向下移动50px，向右移动200px。编写相应的CSS样式， 生成的文件5-10.html在浏览器中显示的效果如图所示。
语法：clear : none | left |right | both
【演练5-16】清除浮动。
5.5 CSS常用布局样式
5.5.1 两列布局样式 许多网站都有一些共同的特点，即顶部放置一个大的导
航或广告条，右侧是链接或图片，左侧放置主要内容，页面 底部放置版权信息等，如图所示的布局就是经典的两列布局。
5.2 CSS盒模型
【演练5-7】网络鞋城页面顶部的布局，本例文件5-7.html 的显示效果如图5-11所示。
5.3 盒子的定位
5.3 盒子的定位
5.3.1 静态定位
静态定位是position属性的默认值，即该元素出现在文 档的常规位置，不会重新定位。通常此属性可以不设置，除 非是要覆盖以前的定义。
5.1 Div布局理念
5.1.2 使用嵌套的Div实现页面排版 Div标签是可以被嵌套的，这种嵌套的Div主要用于实现
更为复杂的页面排版。下面以两个示例说明嵌套的Div之间的 关系。
【演练 5-1】未嵌套的Div容器. 【演练 5-2】嵌套的Div容器 。
5.2 CSS盒模型
5.2.1 盒模型的概念