Web程序开发：第11章 框模型.pdfVIP

第11章 框模型 11.1 概述 11.2 边框 11.3 内边距 11.4 外边距 11.5 外边距合并 11.1 概述 CSS 框模型(Box Model) 规定了元素框处理元素内容、内边距、边框和 外边距的方式。元素框的最内部分是实际的内容，直接包围内容的是内边 距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距 ，外边距默认是透明的，因此不会遮挡其后的任何元素。 11.1 概述-续1 11.2 边框 元素的边框(border) 是围绕元素内容和内边距的一条或多条线。每个边 框有3 个方面：宽度、样式，以及颜色。元素的背景是内容、内边距和 边框区的背景。边框相关样式如下表。 属性 描述 border 简写属性，用于把针对四个边的属性设置在一个声明 border-width 用于为元素的所有边框设置宽度，或者单独为各边边框设置宽度 border-style 用于设置元素所有边框的样式，或者单独为各边设置边框样式 border-color 设置元素的所有边框的颜色，或为4 个边分别设置颜色 border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中 border-bottom-width 设置元素的下边框的宽度 border-bottom-style 设置元素的下边框的样式 border-bottom-color 设置元素的下边框的颜色 border-top 简写属性，用于把上边框的所有属性设置到一个声明中 border-top-width 设置元素的上边框的宽度 border-top-style 设置元素的上边框的样式 border-top-color 设置元素的上边框的颜色 11.2 边框-续1 元素的边框(border) 是围绕元素内容和内边距的一条或多条线。 属性 描述 border-left 简写属性，用于把左边框的所有属性设置到一个声明中 border-left-width 设置元素的左边框的宽度 border-left-style 设置元素的左边框的样式 border-left-color 设置元素的左边框的颜色 border-right 简写属性，用于把右边框的所有属性设置到一个声明中 border-right-width 设置元素的右边框的宽度 border-right-style 设置元素的右边框的样式 border-right-color 设置元素的右边框的颜色 border-image 设置所有四个border-image-* 属性的简写属性 （css3 ） border-radius 设置所有四个border-*-radius 属性的简写属性 （css3 ） box-shadow 向方框添加一个或多个阴影 （css3） 11.2.1 边框宽度 border-width:关键字|长度 border-top-width:关键字|长度 A ：四边都是1px B：上下1px，左右2px border-bottom-width:关键字|长度 C：上1px，下3px，左右2px border-right-width:关键字|长度 D：上1px、右2px、下3px、左4px border-left-width:关键字|长度 div {