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元素盒子