1、第第15章章CSS3的盒模型及网页布局CSS盒模型盒模型1CSS布局常用属性布局常用属性2CSS的网页布局的网页布局3DIV+CSS布局的应用布局的应用415.1 CSS盒模型盒模型 盒模型是盒模型是CSS控制页面布局的一个非常重要的概念，页控制页面布局的一个非常重要的概念，页面上的所有元素，包括文本、图像、超级链接、面上的所有元素，包括文本、图像、超级链接、div块等，块等，都可以被看作盒子。都可以被看作盒子。由盒子将页面中的元素包含在一个矩形区域内，这个矩由盒子将页面中的元素包含在一个矩形区域内，这个矩形区域则称为形区域则称为“盒模型盒模型”。15.1 CSS盒模型盒模型 网页页面布局的过
2、程可以看作在页面空间中摆放盒子的网页页面布局的过程可以看作在页面空间中摆放盒子的过程。通过调整盒子的边框、边界等参数控制各个盒子，实过程。通过调整盒子的边框、边界等参数控制各个盒子，实现对整个网页的布局。现对整个网页的布局。盒模型由内到外依次分为内容盒模型由内到外依次分为内容（content）、填充（）、填充（padding）、）、边框（边框（border）和边界（）和边界（margin）4部分。部分。盒子的实际大小为各部分之和，盒子的实际大小为各部分之和，图图15-1所示的盒子宽度为：左边界所示的盒子宽度为：左边界+左边框左边框+左填充左填充+内容宽度内容宽度+右填右填充充+右边框右边框+右
3、边界。右边界。15.1 CSS盒模型盒模型15.1.1 盒模型的组成盒模型的组成 1.内容内容 内容（内容（content）是盒子里的）是盒子里的“物品物品”，是盒模型中必须，是盒模型中必须有的部分，可以是网页上的任何元素，如文本、图片、视频有的部分，可以是网页上的任何元素，如文本、图片、视频等各种信息。等各种信息。定义盒模型语法格式如下：定义盒模型语法格式如下：width:auto|length;height:auto|length;overflow:auto|visible|hidden|scroll;15.1 CSS盒模型盒模型示例示例15-1对对2个含有文字信息的盒模型进行了内容设置个
4、含有文字信息的盒模型进行了内容设置15.1 CSS盒模型盒模型2.边界边界 边界（边界（margin）是盒模型与其他盒模型之间的距离，使）是盒模型与其他盒模型之间的距离，使用用margin属性定义。属性定义。示例示例15-2演示了边界设置演示了边界设置.margin:auto|length;15.1 CSS盒模型盒模型3.填充填充 填充（填充（padding）用来设置内容和盒子边框之间的距离，可用）用来设置内容和盒子边框之间的距离，可用padding属性设置。属性设置。padding:length;15.1 CSS盒模型盒模型4.边框边框 边框（边框（border）是盒模型中介于填充（）是盒模
5、型中介于填充（padding）和边）和边界（界（margin）之间的分界线）之间的分界线。（1）边框样式）边框样式（2）边框宽度）边框宽度（3）边框颜色）边框颜色15.1 CSS盒模型盒模型示例示例15-4对边框进行了设置对边框进行了设置.15.1 CSS盒模型盒模型15.1.2 盒的类型盒的类型 CSS中的盒子可分为中的盒子可分为block类型与类型与inline类型类型，使用，使用display属性来定属性来定义。义。15.1 CSS盒模型盒模型15.1.3 CSS3新增的与盒相关的属性新增的与盒相关的属性1.overflow-x与与overflow-y属性属性 指定了盒的宽度与高度后，可
6、能出现盒子无法承载其中内容的情况，为了避免内容溢出，使用overflow属性来指定如何显示盒中容纳不下的内容。15.1 CSS盒模型盒模型2.text-overflow属性属性 text-overflow属性用于指定盒子中文本溢出的显示方式，可以在盒的末尾显示一个代表省略的符号。15.1 CSS盒模型盒模型3.box-shadow属性属性 box-shadow属性让盒在显示时产生阴影效果。属性让盒在显示时产生阴影效果。box-shadow属性的指定方式如下。属性的指定方式如下。box-shadow:xlength ylength r color 15.1 CSS盒模型盒模型4.box-sizi
7、ng属性属性 使用使用box-sizing属性，可以指定用属性，可以指定用width属性与属性与height属性指定的宽度值与高度值是否包含元素的填充区域（属性指定的宽度值与高度值是否包含元素的填充区域（padding）与边框（）与边框（border）的宽度与高度，从而实现更）的宽度与高度，从而实现更为精确的定位。为精确的定位。15.1 CSS盒模型盒模型示例示例15-10使用了使用了box-sizing属性，每个盒子的总宽度为属性，每个盒子的总宽度为浏览器宽度的浏览器宽度的50%，实现了一个精确的布局，实现了一个精确的布局。15.2 CSS布局常用属性布局常用属性 常用的布局方式主要有定位式
8、和浮动式两种，相应布局常用的布局方式主要有定位式和浮动式两种，相应布局属性为定位属性（属性为定位属性（position）和浮动属性（）和浮动属性（float）。）。15.2.1 定位属性（定位属性（position）使用使用position属性可以精确控制盒子的位置，其语法格属性可以精确控制盒子的位置，其语法格式如下。式如下。position:static|relative|absolute|fixed15.2 CSS布局常用属性布局常用属性1静态定位静态定位设置设置position属性的值为属性的值为static，或不做设置即缺省时默，或不做设置即缺省时默认为认为static，元素按照，元素
9、按照HTML规则定位。规则定位。15.2 CSS布局常用属性布局常用属性2相对定位相对定位 设置设置position属性的值为属性的值为relative时即为相对定位，设时即为相对定位，设置盒子相对其原本位置的定位。相对定位的盒子占用原页面置盒子相对其原本位置的定位。相对定位的盒子占用原页面空间。空间。15.2 CSS布局常用属性布局常用属性3绝对定位绝对定位 设置设置position属性的值为属性的值为absolute时即为绝对定位，设时即为绝对定位，设置盒子相对其具有置盒子相对其具有position设置的父对象进行定位。设置的父对象进行定位。（1）父对象有）父对象有position属性设置
10、属性设置15.2 CSS布局常用属性布局常用属性（2）父对象无）父对象无position属性设置属性设置 绝对定位元素的所有层次父对象均无绝对定位元素的所有层次父对象均无position属性设置属性设置时，该元素以时，该元素以body即浏览窗口为参照绝对定位。如示例即浏览窗口为参照绝对定位。如示例15-13中，删除中，删除A图片父对象图片父对象position属性设置，即删除属性设置，即删除如下代码行：如下代码行：position:relative;left:0px;top:0px;15.2 CSS布局常用属性布局常用属性4层叠定位属性（层叠定位属性（z-index）被定位的元素会挡住部分其他
11、元素，可以通过层叠定位属性被定位的元素会挡住部分其他元素，可以通过层叠定位属性（z-index）定义页面元素的层叠次序。）定义页面元素的层叠次序。z-index的取值可的取值可以为负数，表示各元素间层次关系，值大者在上，当为负数以为负数，表示各元素间层次关系，值大者在上，当为负数时表示该元素位于页面之下。时表示该元素位于页面之下。15.2 CSS布局常用属性布局常用属性15.2.2 浮动属性（浮动属性（float）float属性可以控制盒子左右浮动，直到边界碰到父对象属性可以控制盒子左右浮动，直到边界碰到父对象或另一个浮动对象。或另一个浮动对象。float属性语法格式如下。属性语法格式如下。f
12、loat:none|left|right;1基本浮动定位基本浮动定位 设置了向左或向右浮动的盒子，整个盒子会做相应的浮动设置了向左或向右浮动的盒子，整个盒子会做相应的浮动。浮动盒子不再占用原本在文档中的位置，其后续元素会自。浮动盒子不再占用原本在文档中的位置，其后续元素会自动向前填充，遇到浮动对象边界则停止。动向前填充，遇到浮动对象边界则停止。15.2 CSS布局常用属性布局常用属性15.2 CSS布局常用属性布局常用属性2清除浮动属性清除浮动属性 浮动设置使用户能够更加自由方便地布局网页，但有时某浮动设置使用户能够更加自由方便地布局网页，但有时某些盒子可能需要清除浮动设置，这时需要用到浮动属
13、性些盒子可能需要清除浮动设置，这时需要用到浮动属性clear，其语法格式如下：，其语法格式如下：clear:none|left|right|both;15.3 CSS的网页布局的网页布局 网页布局结构按照列数可分为单列、两列和三列等几种网页布局结构按照列数可分为单列、两列和三列等几种布局。布局。15.3.1 单列布局单列布局 单列布局相对简单，很多复杂布局往往以单列布局为基础单列布局相对简单，很多复杂布局往往以单列布局为基础。单列布局中的对象位置可固定在左。单列布局中的对象位置可固定在左侧侧、浮在、浮在右侧右侧或居中；或居中；宽度可用像素值固定、百分比或相对于字号设置。宽度可用像素值固定、百分
14、比或相对于字号设置。15.3 CSS的网页布局的网页布局15.3 CSS的网页布局的网页布局15.3.2 两列布局两列布局1传统的两列布局传统的两列布局两列布局使用两个盒两列布局使用两个盒子，第一个盒子位置子，第一个盒子位置应在页面左侧，第二应在页面左侧，第二个盒子（应在页面右个盒子（应在页面右侧，可用侧，可用fixed属性或属性或float属性设定。属性设定。思考：思考：如果左右两个盒子没有如果左右两个盒子没有设置统一的高度设置统一的高度“height:400px”，页面效果，页面效果会有什会有什么变化呢？么变化呢？15.3 CSS的网页布局的网页布局15.3.2 两列布局两列布局2.用用C
15、SS3改进的改进的盒布局盒布局如果使用盒布局，如果使用盒布局，需要设置左右两个需要设置左右两个盒子的外层容器的盒子的外层容器的box属性，不需要属性，不需要使用使用float属性。属性。15.3 CSS的网页布局的网页布局3.嵌套的嵌套的2列布局列布局 顶部固定，一列固定、一列变宽的布局是在博客类网站中很受欢迎的顶部固定，一列固定、一列变宽的布局是在博客类网站中很受欢迎的布局形式，这类网站常把侧边的导航栏宽度固定，而主体的内容栏宽度布局形式，这类网站常把侧边的导航栏宽度固定，而主体的内容栏宽度是可变的。是可变的。表表15-1 与盒布局相关的部分属性与盒布局相关的部分属性属性属性功能功能说明说明
16、box-flex设置弹性盒布局设置弹性盒布局应用于盒布局中，如果使用应用于盒布局中，如果使用chrome浏览器，使用浏览器，使用-webkit-box-flex，如果使用，如果使用Firefox浏览器，使用浏览器，使用-moz-box-flex。box-ordinal-group设置盒元素的显示顺序设置盒元素的显示顺序应用于盒布局中，如果使用应用于盒布局中，如果使用chrome浏览器，使用浏览器，使用-webkit-box-group，如果使用，如果使用Firefox浏览器，使用浏览器，使用-moz-box-group。box-orient设置盒元素的显示方向设置盒元素的显示方向应用于盒布局中
17、，如果使用应用于盒布局中，如果使用chrome浏览器，使用浏览器，使用-webkit-box-orient，如果使用，如果使用Firefox浏览器，使用浏览器，使用-moz-box-orient。box-sizing指定使用指定使用width、height属性时，属性时，指 定 的 值 是 否 包 括 元 素 的指 定 的 值 是 否 包 括 元 素 的padding值值 与与border值。值。如果使用如果使用chrome浏览器，使用浏览器，使用-webkit-box-orient，如果使用如果使用Firefox浏览器，使用浏览器，使用-moz-box-sizing。如果使用如果使用IE浏览
18、器，使用浏览器，使用-ms-box-sizing。15.3 CSS的网页布局的网页布局示例示例15-20是一个典型的嵌套是一个典型的嵌套2列布局，用到了盒布局中的列布局，用到了盒布局中的弹性布局属性弹性布局属性-webkit-box-flex。15.3 CSS的网页布局的网页布局15.3.3 使用使用CSS3盒布局盒布局的三列布局的三列布局 三列布局可以使用三列布局可以使用float属性实属性实现，对现，对3个盒子（列）对象分别设个盒子（列）对象分别设定位置和宽度，再设置浮动属性即定位置和宽度，再设置浮动属性即可。可。#left height:400px;width:120px;float:l
19、eft;#right background:#FFC;height:400px;width:100px;float:right;#main background:#D0FFFF;height:400px;margin-left:120px;15.3 CSS的网页布局的网页布局15.3.3 使用使用CSS3盒布局的三列布局盒布局的三列布局1简单的三列布局简单的三列布局示例示例15-21是一个使用盒布局实现的三列布局。左右两列是一个使用盒布局实现的三列布局。左右两列宽度固定，中间列自适应。宽度固定，中间列自适应。15.3 CSS的网页布局的网页布局嵌套的三列布局嵌套的三列布局前面布局采用的策略是将
20、盒子（前面布局采用的策略是将盒子（div块）从上到下、从左到块）从上到下、从左到右依次排列。右依次排列。15.3 CSS的网页布局的网页布局15.4 DIV+CSS布局的应用 在设计网页之前，首先对网页布局有一个总体思路，然在设计网页之前，首先对网页布局有一个总体思路，然后就可以用盒子对网页进行大致分块设定后就可以用盒子对网页进行大致分块设定。15.4.1 图文混排的实现图文混排的实现 1用用DIV+CSS布局方式实现图文混排效果布局方式实现图文混排效果15.4 DIV+CSS布局的应用1用用DIV+CSS布局方式实现布局方式实现图文混排效果图文混排效果15.4 DIV+CSS布局的应用15.
21、4 DIV+CSS布局的应用15.4.1 图文混排的实现图文混排的实现2对示例对示例15-23的改进的改进15.4 DIV+CSS布局的应用15.4.2 制作二级导航菜单制作二级导航菜单 导航菜单通常分为横向导航菜单和纵向导航菜单。导航菜单通常分为横向导航菜单和纵向导航菜单。DIV+CSS布局中多通过控制列表样式制作导航菜单，主要布局中多通过控制列表样式制作导航菜单，主要用到用到、等等3组标记。组标记。1建立一级菜单建立一级菜单15.4 DIV+CSS布局的应用2定义定义CSS样式样式 创建样式创建样式#menu，设置菜单整体大小等属性，并添加到，设置菜单整体大小等属性，并添加到标记中；创建样
22、式标记中；创建样式#menu ul，设置隐藏列表符号，设置隐藏列表符号、清除边距等属性、清除边距等属性,代码如下。代码如下。15.4 DIV+CSS布局的应用 3创建二级菜单创建二级菜单 二级导航菜单是指当鼠标经过一级菜单项时，会弹出相应二级导航菜单是指当鼠标经过一级菜单项时，会弹出相应的二级菜单，鼠标离开该项后二级菜单自动消失。接下来在的二级菜单，鼠标离开该项后二级菜单自动消失。接下来在上例的基础上制作二级菜单，以一级菜单项上例的基础上制作二级菜单，以一级菜单项“CSS”为例，为例，在其下添加二级菜单。在其下添加二级菜单。15.4 DIV+CSS布局的应用15.4.2 制作二级导航菜单制作二级导航菜单15.4 DIV+CSS布局的应用4横向二级导航菜单横向二级导航菜单作业请参考本章案例完成如下页面的设计。
