前端第12讲 盒子模型.pptx

第12讲 盒子模型;2;3;4;1. 边框风格;边框设置语法如下： border-style: style [style] [style] [style]; border-方向-style: style; 语法说明： ”style”参数用于设置边框形状，可取的值下表所示。border-style参数可取1~4个，各个参数之间使用空格分隔。 ;border-style属性取值个数不一样时，属性值代表的含义也不一样： 取1个属性值时，表示四个方向的风格一样，例如： border-style: dashed; 取2个属性值时，第一个参数设置上、下边框的风格，第二个参数设置左、右边框的风格，例如： border-style: dashed solid; 取3个属性值时，第一个参数设置上边框的风格，第二个参数设置左、右边框的风格，第三个参数设置下边框的风格，例如： border-style: dashed solid dotted; 边框风格属性取4个属性值时，按顺时针方向依次设置上、右、下、左边框的风格，例如： border-style: dashed solid double dotted; ;边框风格属性示例;2. 边框宽度;边框宽度设置语法如下： border-width: width_value [width_value] [width_value] [width_value] | inherit; border-方向-width: width_value | inherit; 语法说明： 属性值的含义如下表所示： border-width属性可取1~4个值，各个参数之间使用空格分隔。;border-width属性取值个数不一样时，属性值代表的含义也不一样： 取1个属性值时，表示四个方向的宽度一样，例如： border-width: 3px; 取2个属性值时，第一个参数设置上、下边框的宽度，第二个参数设置左、右边框的宽度，例如： border-width: 3px 6px; 取3个属性值时，第一个参数设置上边框的宽度，第二个参数设置左、右边框的宽度，第三个参数设置下边框的宽度，例如： border-width : 3px 6px 9px; 边框风格属性取4个属性值时，按顺时针方向依次设置上、右、下、左边框的宽度，例如： border-width : 1px 3px 6px 9px; ;边框宽度属性示例;3. 边框颜色;边框颜色设置语法如下： border-color: color_value [color_value] [color_value] [color_value] | inherit; border-方向-color: color_value | inherit; 语法说明： color_value”参数用于设置边框颜色，值可以是表示颜 色英文单词或颜色的十六进制数或颜色的rgb等值 。 ;border-color属性取值个数不???样时，属性值代表的含义也不一样： 取1个属性值时，表示四个方向的颜色一样，例如： border-color: red; 取2个属性值时，第一个参数设置上、下边框的颜色，第二个参数设置左、右边框的颜色，例如： border-color: red blue; 取3个属性值时，第一个参数设置上边框的颜色，第二个参数设置左、右边框的颜色，第三个参数设置下边框的颜色，例如： border-color: red blue green; 边框风格属性取4个属性值时，按顺时针方向依次设置上、右、下、左边框的颜色，例如： border-color: red blue green pink; ;边框颜色属性示例;4. 边框简写属性;边框简写属性设置语法如下： border: border-width border-style border-color; border-方向: border-width border-style border-color; 语法说明： 三个参数的位置任意，但一般会写成上述的顺序。参数之 间使用空格分隔。 ;边框简写属性示例一;使用border-top-color属性履盖border属性设置的边框颜色样式;21;内边距属性及其属性值 属性值说明： length表示使用像素、厘米等单位的某个正数数值。 %表示使用基于父元素的宽度的百分。 inherit表示从父元素继承内边距。;内边距属性设置语法： padding: padding_value [padding_v