课程主题使用边框边距属性美化网页网页客户端技术课程.pptx

;使用边框、边距属性美化网页;四;盒子模型;HTML盒子模型分为三类：一类是块级元素，可以把这类元素叫大盒子；一类是行内元素，可以把这类元素叫小盒子；还有一类是行内块级元素。大家都知道大盒子里可以嵌套小盒子，小盒子不能嵌套大盒子的，因此在写标签时，如果需要嵌套，就需要考虑一下它们之间应该如何嵌套了。但是行内块元素要不就是单标签，要不就是表单元素，所以几乎不存在着嵌套关系。

由此看来，盒子模型由content（内容）、border（边框）、padding（内边距）和margin（外边距）共四个部分组成。盒子模型分为两种：一种是IE盒模型（也称怪异盒模型），一种是标准盒模型。下面一起来看一下IE盒模型和标准盒模型的区别。;IE盒子模型的范围包括margin、border、padding和content，IE盒子模型的content部分包含了border和paddin，如下图所示。;标准w3c盒模型的范围包括margin、border、padding和content，并且content部分不包含其他部分也就是border和padding。如下图所示。要注意，我们平时写代码的时候，使用标准w3c盒模型。在网页上使用doctype声明，则所有浏览器都使用标准w3c盒模型。;边框属性;基本语法：

border-style：样式值

border-left-style：样式值

border-top-style：样式值

border-right-style：样式值

border-bottom-style：样式值;语法说明：

样式值可以取如表中所示的各值。;border-style样式属性是一个复合属性，可以同时设1-4个值。

设1个值，同时设置4条边框。设2个值，上下边框使用第1个值，左右边框使用第2个值。设3个值，上边框使用第1个值，左右边框使用第2个值，下边框使用第3个值。设4个值，分别为上右下左边框的取值。设置多个值时，值与值之间使用空格分隔；

其他样式属性只能设一个值。;border-style样式属性是一个复合属性，可以同时设1-4个值。

例如，以下代码为段落设置了宽度为200像素，以及上、右、下、左边框的样式，如下图所示。p{width:200px;border-style:dottedsoliddoubledashed;padding:20px;};调整边框宽度

在CSS中，设置边框的宽度同样有5个属性。

基本语法：

border-width：关键字|长度

border-left-width：关键字|长度

border-top-width：关键字|长度

border-right-width：关键字|长度

border-bottom-width：关键字|长度;语法说明：

边框宽度属性中关键字说明如表所示；

长度包括长度值和单位，不可以取负数。长度单位可以使用绝对单位也可以使用相对单位。如px、pt、cm等；

border-width是一个复合属性，可同时设置4条边框的宽度。具体设置可以参照border-style样式属性的设置。

例如，以下代码设置了段落的边框宽度为15像素，实线。

p{border-style:solid;border-width:15px;padding:20px;};设置边框颜色

在CSS中，设置边框的宽度同样有5个属性。

基本语法：

border-color：color

border-left-color：color

border-top-color：color

border-right-color：color

border-bottom-color：color;设置边框颜色

语法说明：

color为颜色表示的三种形式，颜色名称、十六进制值或rgb()函数；

border-color是一个复合属性，可同时设置4条边框的颜色。具体设置可以参照border-style样式属性的设置。

例如，以下代码设置类名为three的段落的边框为实线，上边框颜色为#ff0000中（红色），左右边框颜色为#00ff00（绿色），下边框颜色为#0000ff（蓝色）。

p.three{border-style:solid;border-color:#ff0000#00ff00#0000ff};设置边框属性

在CSS中，border边框属性用来同时设置边框的宽度、样式和颜色。边框属性也包括5个可用的属性。

基本语法：

border：边框宽度|边框样式|边框颜色

border-left：边框宽度|边框样式|边框颜色

border-top：边框宽度|边框样式|边框颜色

border-right：边框宽度|边框样式|边框颜色

border-bott