第三章 盒子模型.ppt

第三章 盒子模型 ? 盒子模型是CSS控制页面时一个很重要的概念。只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制好页面中的各个元素。本章主要介绍盒子模型的基本概念，并讲解CSS定位的基本方法。 ? 所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。 ? 一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两方面来理解。一是理解一个孤立盒子的内部结构，二是理解多个盒子之间的相互关系。 第三章 盒子模型 ? CSS 盒子模型： 包括： 边框 内边距 外边距 元素内容 第三章 盒子模型 ? 在 CSS 中，width 和 height 指的是内容区域的宽度和高度 。增加内边距、边框和外边距 不会影响内容区域的尺寸，但 是会增加元素框的尺寸。 ? 假设框的每个边上有 10 个像 素的外边距和 5 个像素的内边 距。如果希望这个元素框达到 100 个像素，就需要将内容的 宽度设置为 70 像素，如图。 第三章 盒子模型 第三章 盒子模型 盒子模型的总宽度为 盒子实际宽度 = 左边框宽度 + 左内边距+ width + 左内边距 + 左边框宽度 盒子实际占用的宽度 = 左外边距 + 左边框宽度 + 左内边距+ width + 右内边距+右边框宽度 +右外边距 盒子模型的总高度为 盒子实际高度 = 上边框宽度 + 上内边距+ height + 下内边距+下边框宽度 盒子实际占用的宽度 = 上外边距 +上边框宽度 + 上内边距+ height + 下内边距+下边框宽度+下外边距 属性 border border-style border-width border-color border-bottom 描述 简写属性。作用是在一个声明中用来设置四个边框的所有属性。 设置四个边框的样式，可以设置一到四个样式。 设置四个边框的宽度，可以设置一到四个值。 设置四个边框的颜色，可以设置一到四个颜色。 简写属性。作用是在一个声明中用来设置下边框的所有属性。 border-bottom-color border-bottom-style border-bottom-width 设置元素的下边框的颜色。 设置元素的下边框的样式。 设置元素的下边框的宽度。 温馨提示：推荐使用简写属性，灰色属性不推荐使用。 第三章 盒子模型 ---- 边框属性 (1) 属性 border-left 描述 简写属性。用于在一个声明中设置左边框的所有属性。 border-left-color border-left-style border-left-width border-right border-right-color border-right-style border-right-width 设置元素的左边框的颜色。 设置元素的左边框的样式。 设置元素的左边框的宽度。 简写属性。将所有用于右边框的属性设置于一个声明中。 设置元素的右边框的颜色。 设置元素的右边框的样式。 设置元素的右边框的宽度。 温馨提示：推荐使用简写属性，灰色属性不推荐使用。 第三章 盒子模型 ---- 边框属性 (2) 属性 border-top 描述 简写属性。将所有用于上边框的属性设置于一个声明中。 border-top-color border-top-style border-top-width 设置元素的上边框的颜色。 设置元素的上边框的样式。 设置元素的上边框的宽度。 温馨提示：推荐使用简写属性，灰色属性不推荐使用。 第三章 盒子模型 ---- 边框属性 (3) border-style none dotted dashed solid double groove ridge inset outset 描述 定义无边框。 定义点状边框。在大多数浏览器中呈现为实线。 定义虚线。在大多数浏览器中呈现为实线。 定义实线。 定义双线。双线的宽度等于 border-width 的值。 定义 3D 凹槽边框。其效果取决于 border-color 的值。 定义 3D 垄状边框。其效果取决于 border-color 的值。 定义 3D inset 边框。其效果取决于 border-color 的值。 定义 3D outset 边框。其效果取决于 border-color 的值。 注意：IE浏览器不支持的b