第三章 盒子模型.pptVIP

第三章 盒子模型 ? 盒子模型是CSS控制页面时一个很重要的概念。只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制好页面中的各个元素。本章主要介绍盒子模型的基本概念，并讲解CSS定位的基本方法。 ? 所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。 ? 一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两方面来理解。一是理解一个孤立盒子的内部结构，二是理解多个盒子之间的相互关系。 第三章 盒子模型 ? CSS 盒子模型： 包括： 边框 内边距 外边距 元素内容 第三章 盒子模型 ? 在 CSS 中，width 和 height 指的是内容区域的宽度和高度 。增加内边距、边框和外边距 不会影响内容区域的尺寸，但 是会增加元素框的尺寸。 ? 假设框的每个边上有 10 个像 素的外边距和 5 个像素的内边 距。如果希望这个元素框达到 100 个像素，就需要将内容的 宽度设置为 70 像素，如图。 第三章 盒子模型 第三章 盒子模型 盒子模型的总宽度为 盒子实际宽度 = 左边框宽度 + 左内边距+ width + 左内边距 + 左边框宽度 盒子实际占用的宽度 = 左外边距 + 左边框宽度 + 左内边距+ width + 右内边距+右边框宽度