CSS3布局基础
项目8
网页中的每个元素都可以看作一个矩形的盒子，通过设置盒子的
边框、边距与浮动等属性，可以构建不同的网页布局。本项目将介绍
盒子模型的相关知识，以及使用CSS3设置元素的浮动与定位等属性的
方法。
u了解盒子模型的基本结构。
u掌握使用CSS3设置盒子模型的边框、边距、背景等属性的方法。
u掌握使用CSS3设置元素浮动的方法。
u掌握使用CSS3定位元素的方法。
内容概览
任务8.1盒子模型
任务8.2元素的浮动与定位
盒子模型
任务8.1?盒子模型的基本结构
?盒子模型的边框与边距
?盒子模型的背景属性
?盒子模型的其他属性
?不同类型元素的盒子模型
8.1.1盒子模型的基本结构
HTML中的大部分元素（特别是块级元素）都可以看作是一个盒子，网页元素
的定位实际就是这些大大小小的盒子在页面中的定位。一个标准的W3C盒子模型有
4个组成部分，分别为内容（content）、内边距（padding）、边框（border）与外边
距（margin），盒子模型的基本结构如下图8-1所示。
以生活中的盒子为例，内容是盒子
中放置的物品，内边距是防止物品磕碰
所填充的泡沫、气泡膜等辅料，边框是
盒子本身，外边距是盒子与盒子之间的
空隙。
知识库：设置元素宽高的width、height属性，都是作用于内容区域的（背景图像可以
延伸到内边距区域，背景颜色可以延伸到边框区域）。也就是说，一个盒子模型实际所占
空间的宽度与高度为：
width(real)width(content)+2×(border+padding+margin)
height(real)height(content)+2×(border+padding+margin)
拓展阅读：在CSS3中，设置box-sizing属性可以更改
width、height属性的作用范围，属性值为content-box是默
认值，表示这两个属性作用于内容区域；属性值为
border-box表示这两个属性作用于边框及其内部区域。
【例8-1】在浏览器中查看盒子模型。
步骤一：
创建HTML5文档，参照以下代码段分别在style和body标签中输入代码（详情见教材），
然后保存文档。
步骤二：
在火狐浏览器中打开该文档，按“F12”键
打开“开发者工具”窗格，在“查看器”选项
卡中能够看到网页源代码，单击第一个div元
素的代码行，“布局”选项卡中的“盒模型”
区域将显示该div元素的盒子模型及其各属性
值，如右图8-2所示。
8.1.2盒子模型的边框与边距
1．盒子模型的边框
盒子模型的边框用border属性设置，它具有子属性border-style、border-color
与border-width，分别用于设置边框样式、边框颜色与边框宽度，同时还