《网页设计》课件-4-2盒子模型的常用属性

盒子模型的常用属性目录◎边框border属性◎边距属性◎

CSS3新增属性1边框border属性1.边框宽度-border-width边框属性控制元素所占用空间的边缘。语法：

border-width:上边框宽度值[右边框宽度值下边框宽度值左边框宽度值];语法中，宽度由数字和单位组成的长度值，不可为负值，常用取值单位为像素px。并且遵循值复制的原则，值可以取1到4个，设置了1个值，应用于4个边框；设置了2个或3个值，省略的值与对边相等；设置了4个值，按照上、右、下、左的顺序显示结果。边框属性主要包括边框宽度、边框样式、边框颜色等，此外还有border的综合属性，在CSS3中添加了圆角边框、图片边框属性。边框宽度用于设置元素边框的宽度值。举例：“border-width:3px;”

表示4个边框的宽度都为3像素。“border-width:3px

6px;”

表示上下边框的宽度都为3像素，左右边框的宽度都为6像素。“border-width:3px6px9px;”

表示上边框的宽度都为3像素，左右边框的宽度都为6像素

下边框的宽度都为9像素。也可以按照border-top-width:宽度值、border-right-width:宽度值、border-bottom-width:宽度值、border-left-width:宽度值逐个定义。举例：“border-width:3px6px9px;”

等同于border-top-width:3px;border-right-width:6px;border-bottom-width:9px;border-left-width:6px;2.边框样式border-style边框样式属性用以定义边框的风格呈现样式，这个属性必须用于指定的边框。语法：

border-style:上边框样式[右边框样式下边框样式左边框样式];样式值可以取的值共有9种，见表所示属性含义属性含义none不显示边框，为默认属性值groove边框带有立体感的沟槽dotted点线ridge边框成脊形dashed虚线inset使整个方框凹陷，即在外框内嵌入一个立体边框solid实线outset使整个方框凸起，即在外框内嵌外一个立体边框double双实线

border-style属性为综合属性设置四边样式，必须按上右下左的顺时针顺序，省略时同样采用值复制的原则，即1个值为4边，2个值为上下/左右，3个值为上/左右/下。border-style也可以分别定义border-top-style、border-right-style、border-bottom-style、border-left-style的样式。橙色背景的solid（实线）dashed（虚线）、dotted（点线）、double（双实线）较为常用。3.边框颜色-border-color边框颜色属性用于定义边框的颜色。语法：

border-color:上边框颜色值[右边框颜色值下边框颜色值左边框颜色值];border-color的属性值同样复合颜色的定义法：预定义的颜色值、十六进制#RRGGBB和RGB代码rgb（r，g，b）三种，其中十六进制#RRGGBB使用的最多。border-color的值可以取1到4个，设置了1个值，应用于4个边框；设置了2个或3个值，省略的值与对边相等；设置了4个值，按照上、右、下、左的顺序显示结果。同样，border-color也可以按照border-top-color:颜色值、border-right-color:颜色值、border-bottom-color:颜色值、border-left-color:颜色值逐个定义。4.边框综合属性-borderborder为复合属性是边框宽度border-width、样式border-style和颜色border-color的简写方式。语法：

border:<边框宽度>|<边框样式>|<颜色>；在复合属性中，边框属性border能同时设置4种边框。若果只需要给出一组边框的宽度、样式与颜色，可以通过border-top、border-right、border-bottom、border-left分别设置。例如“border:1pxsolid#F00;”表示元素的4个边框都是1像素红色的实线。当网页中只需要元素的底部边框为1像素红色的实线时，代码修改为“border-bottom:1pxsolid#F00;”。举例演示【实例6-2】border边框属性的设置。2边距属性1.内边距-padding边距属性分为：内边距padding和外边距marign两种。语法：

padding：上内边距值[右内边距值下内边距值左内边距值];padding属性用于设置内边距，它是一个复合属性语法格式中。边距值由数字和单位组成的长度值，不可为负值，常用取值单位为像素px，数值也可以是百分比，使用百分比时，内边距的宽度值随着父元素宽度width的变化而变化而变化，与height无关。内边距主要用来调整内容在盒子中的置，指的是元素内容与边框border之间的距离，也被常称为内填充。padding也遵循值复制的原则，与border属性类似。当只对某个方向的内边距进行设置时，可以通过padding-top（上内边距）、padding-right（右内边距）、padding-bottom（下内边距）、padding-left（左内边距）分别设置。2.外边距-margin语法：

margin：上外边距值[右外边距值下外边距值左外边距值];margin属性用于设置外边距，它是一个复合属性，与内边框padding的用法类似。外边距margin指的是元素边框与相邻元素之间的距离。注意：外边距可以使用负值，使相邻元素重叠。当只需要对某个方向的外边距进行设置时，可以通过margin-top（上外边距）、margin-right（右外边距）、margin-bottom（下外边距）、margin-left（左外边距）分别设置。当使用盒元素进行布局时，使用了宽度属性，同时将margin的左右外边距设置为auto时，可以实现盒元素的居中。举例演示【实例6-3】内外边距的使用。内外边距的使用3CSS3新增属性1.圆角边框CSS3中新增加了圆角边框、图片边框、盒子阴影等属性。语法：

border-radius:半径值1/半径值2;语法中，border-radius的属性值包含2个参数，取值可以为像素值或百分比。其中“半径值1”表示圆角的水平半径，“半径值2”表示圆角的垂直半径，两个参数之间用“/”隔开。。在CSS3中，使用border-radius属性实现了矩形边框的圆角化。例如：

width:500px;height:500px;border:4pxsolid#F00;border-radius:80px/100px;/*分别设置水平半径80px、垂直半径100px*/例如：

width:400px;height:400px;border:4pxsolid#4087d0;border-radius:160px/80px;/*分别设置水平半径160px、垂直半径80px*/圆角边框的参数示意图圆角边框的设置效果举例演示【实例6-4】圆角边框属性的设置。在定义border-radius属性时，如果只保留一个参数。例如：border-radius:200px;由于图片自身的宽高都为400px，所以整体图片显示为圆形。设置一个参数实现圆形效果2.图片边框图片边框的属性与含义在CSS3中，使用图片边框border-image实现对区域整体添加一个图片边框。border-image属性是综合属性，还包括border-image-source、border-image-slice、border-image-width、border-image-outset以及border-image-repeat等属性。属性名称含义border-image-source指定图片路径。border-image-slice指定边框图像顶部、右侧、底部左侧内偏移量。border-image-width指定边框宽度，可以设置1-4个值。border-image-outset指定背景想盒子外部延伸的距离，可以设置1-4个值。border-image-repeat指定背景图片的平铺方式，stretch表示拉伸、repeat重复、round表示环绕。2.图片边框语法：

border-image-source：none|图片路径；border-image-slice：图像顶部、右侧、底部左侧内偏移值(像素或百分百；border-image-width：边框的宽度值(像素)；border-image-outset：数值；border-image-repeat：stretch|repeat|round；综合属性语法如下：语法：

border-image：border-image-sourceborder-image-slice/border-image-width/border-image-outsetborder-image-repeat;举例演示【实例6-5】图片边框的使用。素材图片边框图片使用的效果注意：border-image综合属性:border-image:url(img/bg.png)33%/100px/0pxrepeat;浏览器的兼容性的问题代码如下修改-moz-border-image:url(img/bg.png)33%/100px/0pxrepeat;/*兼容Chrome/safari*/-webkit-border-image:url(img/bg.png)33%/100px/0pxrepeat;/*兼容Firefox*/3.阴影效果box-shadowCSS中的box-shadow属性可以实现阴影效果。语法：

box-shadow:水平阴影值垂直阴影值模糊距离值阴影大小值颜色阴影类型;语法中，水平阴影值表示元素水平阴影位置，可以为负值（必选属性）；垂直阴影值表示元素垂直阴影位置，可以为负值（必选属性）；模糊距离值表示阴影模糊半径（可选属性）；阴影大小值表示阴影扩展半径，不能为负值（可选属性）；颜色表示阴影的颜色（可选属性）；阴影类型主要包含内阴影（inset）/外阴影（默认）（可选属性）。举例演示【实例6-6】阴影效果box-shadow的使用。外阴影效果注意：box-shadow向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由2-4个长度值、可选的颜色值以及可选的inset关键词来规定。省略长度的值是0。内阴影效果4.

box-sizing属性CSS中的盒子的实际宽等于width的值、左右内边距值、左右边框宽值、左右外边距值之和，高度也一样。缺点：

这样容易出现当一个盒子的实际宽度确定之后，如果添加或者修改了边框或内边距，从而影响盒子的实际宽度，为了不影响整体布局，通常会通过调整width属性值，来保证盒子总宽度保持不变。box-sizing属性用于定义盒子的宽度width和高度值height是否包含元素的内边距和边框。