河南中医药大学：《Web前端开发技术与实践》课程教学课件讲稿（2015）第10章 盒子模型

Web前端开发技术与实践 第10章:盒子模型 阮晓龙 13938213680/ rxl@hactcmeducn http://web.51xueweb.cr 问南中医学院管理信息工程学科 河南中医学院网络信息中心 2015.11

Web前端开发技术与实践 第10章：盒子模型 阮晓龙 13938213680 / rxl@hactcm.edu.cn http://web.51xueweb.cn 河南中医学院管理信息工程学科 河南中医学院网络信息中心 2015.11 1

2 本章主要内容 口盒子 口盒子类型 口盒子的属性 口浏览器的盒子调试 米 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 本章主要内容  盒子  盒子类型  盒子的属性  浏览器的盒子调试 2

3 1.盒子 1.1元素盒子 口盒子是一个概念,也可以说是容器,可以在里面放置网页中需 要显示的内容,文档中每一个元素都会产生一个盒子,盒子拥 有很多属性,如 width、 height、 padding、 border和 margin等 口元素盒子的最内部分是实际的内容,直接包围内容的是内边距。 内边距可以呈现元素的背景。内边距的边缘是边框,边框以外 是外边距,外边距默认是透明的,因此不会遮挡其后的元素。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.盒子  盒子是一个概念，也可以说是容器，可以在里面放置网页中需 要显示的内容，文档中每一个元素都会产生一个盒子，盒子拥 有很多属性，如width、height、padding、border和margin等。  元素盒子的最内部分是实际的内容，直接包围内容的是内边距。 内边距可以呈现元素的背景。内边距的边缘是边框，边框以外 是外边距，外边距默认是透明的，因此不会遮挡其后的元素。 3 1.1元素盒子

4 外边距 内边距 宽 元素盒子的组成 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 4 元素盒子的组成

1.盒子 1.1元素盒子 口盒子的内边距、边框和外边距的宽度都是可选的,其默认值是 零 口许多元素将会由浏览器自身设置不同的外边距和内边距,可以 通过将元素的 margin和 padding设置为零来覆盖这些浏览器样式, 口实现元素在不同浏览其中样式的统 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.盒子  盒子的内边距、边框和外边距的宽度都是可选的，其默认值是 零。  许多元素将会由浏览器自身设置不同的外边距和内边距，可以 通过将元素的margin和padding设置为零来覆盖这些浏览器样式， 已实现元素在不同浏览其中样式的统一。 5 1.1元素盒子

1.盒子 1.1元素盒子 口外边距 外边距相当于文档中的页边距,是元素边框边缘与相邻元素之间的 距离,主要用来分割各种元素,设置元素之间的距离。如下图中, 浅灰色部分表示盒子的外边距。 外边距 内边距 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.盒子  外边距  外边距相当于文档中的页边距，是元素边框边缘与相邻元素之间的 距离，主要用来分割各种元素，设置元素之间的距离。如下图中， 浅灰色部分表示盒子的外边距。 6 1.1元素盒子

1.盒子 元素盒子 外边距 使用 margin属性来定义元素外边距,属性值单位可以为长度单位 (px、pt、em、ex、in)或百分比,取值可以为正值或负值。 同时外边距还有专门设置某一方向上外边距的属性: margin-top margin- right、 margin- bottom、 margin-left五种属性 表1001外边距的性 性 描述 在一个声明中设置所有外边距属性 margin-bottom设元素的下外边距 margin-left 设置元素的左外边距 margin-nght 设置元素的右外边距 margin-top 设置元素的上外边距。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.盒子  外边距  使用margin属性来定义元素外边距，属性值单位可以为长度单位 （px、pt、em、ex、in）或百分比，取值可以为正值或负值。  同时外边距还有专门设置某一方向上外边距的属性：margin-top、 margin-right、margin-bottom、margin-left五种属性。 7 1.1元素盒子

8 1.盒子 1.1元素盒子 margin属性 margin可以设置为auto。常见的做法是为外边距设置固定的长度值。 (margin: 10px Opx 15px 5px; J ■还可以为 margin设置一个百分比数值。百分比数是相对于父元素的 width计算的。 p(margin: 10% 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.盒子  margin属性  margin可以设置为auto。常见的做法是为外边距设置固定的长度值。  还可以为margin设置一个百分比数值。百分比数是相对于父元素的 width计算的。 8 1.1元素盒子

9 1.盒子 1.1元素盒子 口值复制 在Web前端开发中,有时需要输入一些重复的值。例如 p margin: 0.5em lem 0.5em 1em 1 这种情况下可以使用值复制,不必重复地键入相同的数字。上面的 规则与下面的规则是等价的。 I p(margin: 0. 5em lem:) 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.盒子  值复制  在Web前端开发中，有时需要输入一些重复的值。例如：  这种情况下可以使用值复制，不必重复地键入相同的数字。上面的 规则与下面的规则是等价的。 9 1.1元素盒子

10 1.盒子 1.1元素盒子 口值复制的规则如下 ■如果缺少左外边距的值,则使用右外边距的值。 如果缺少下外边距的值,则使用上外边距的值。 ■如果缺少右外边距的值,则使用上外边距的值。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn

河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.盒子  值复制的规则如下：  如果缺少左外边距的值，则使用右外边距的值。  如果缺少下外边距的值，则使用上外边距的值。  如果缺少右外边距的值，则使用上外边距的值。 10 1.1元素盒子