week7---10月21日 DIV模型

一、复习

1、div 模型的概念

2、div 背景的设置

3、总长度和总宽度的计算

二、新课

（一）块级元素的边框

设置内容

样式属性

上边框

border-top-style:样式;

border-top-width:宽度;

border-top-color:颜色;

border-top:宽度 样式 颜色;

下边框

border-bottom-style:样式;

border-bottom-width:宽度;

border-bottom-color:颜色;

border-bottom:宽度 样式 颜色;

左边框

border-left-style:样式;

border-left-width:宽度;

border-left-color:颜色;

border-left:宽度 样式 颜色;

右边框

border-right-style:样式;

border-right-width:宽度;

border-right-color:颜色;

border-right:宽度 样式 颜色;

边框属性

设置内容

样式属性

属性值

综合样式

border-style:上边[右边下边  左边];

none无(默认)、hidden隐藏、dotted点线、dashed虚线、solid单实线、double双实线、groore沟线、ridge脊线、inset内陷、outset外凸

综合宽度

border-width:上边[右边下边  左边];

不同单位数值、相对值、thin薄、medium普通(默认)、thick厚

综合颜色

border-color:上边[右边下边左边];

颜色名、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)

综合边框

border:四边宽度四边样式四边颜色;

1 设置边框样式border-style

border-style:上边[右边 下边  左边];     — 4边顺时针值复制

    样式：none(默认)  hidden隐藏—无边框

                dotted点线  dashed虚线  solid单实线  double双实线

                groore沟线  ridge脊线      inset内陷       outset外凸

    综合设置4边样式必须按顺时针顺序，省略时采用值复制：缺少左边复制右边、缺少下边复制上边、缺少右边复制上边。

   ★1个值：4边        2个值：上下  左右      3个值：上  左右下

    例如<p>只有上边为沟线groore，其他3边为solid单实线：

    可设置单边样式：p {border-style:grooresolid solidsolid; }

    或设置四边覆盖：p {border-style:solid;           /*设置4边*/

                                          border-top-style:groore; /*覆盖上边*/ }

    例如鼠标指向超链接图片时显示为外凸边框outset：

    a:hover img { border-style:outset;}

注意：使用边框必须设置边框样式—否则边框宽度、颜色无效

2 设置边框宽度border-width

    border-width:上宽度 [右宽度 下宽度  左宽度];— 顺时针值复制

    宽度值：不同单位的固定数值

                    相对值thin薄、medium普通(默认)、thick厚

    CSS没定义关键字的具体值，有的浏览器可能是2px、3px和5px，而有的则可能是1px、2px和3px。IE7默认为4px。

   注意：设置边框宽度必须同时设置边框样式，如果未设置或设置为none，则不论宽度设置为多少都无效—自动设置为0。 

3设置边框颜色border-color

border-color:上边 [右边 下边 左边];   —顺时针，可用值复制

    颜色：颜色名、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)

    默认的边框颜色是元素本身的文本字符颜色，对没有文本的元素—例如只包含图像的表格，则其边框颜色是其父元素—可能是 body、div 或另一个table的文本颜色。

4 综合设置边框属性—宽度、样式、颜色

    border-top:           上边框宽度样式 颜色;

    border-bottom:    下边框宽度样式 颜色;

    border-left:            左边框宽度样式 颜色;

    border-right:         右边框宽度样式 颜色;

    border:                   四边宽度四边样式四边颜色;

    以上综合设置属性值顺序任意，可以只指定需要的属性，省略则使用默认值。但设置四边宽度、四边样式、四边颜色时如果分别为四个边设置不同值，则都必须分别按顺时针顺序采用值复制：1个值为4边、2个为上下 右左，3个为上 左右 下。

（二）块级元素的内外边距与轮廓

内外边距的默认宽度应该是0，但许多浏览器都已提供了默认值，而且不同厂商对浏览器的默认值设置会有所不同，例如在每个<p>段落元素设置了固定的外边距（空行），Netscape和IE整个浏览器页面body的默认外边距为8px，而Opera则默认内边距为8px。

    为了在不同浏览器中具有统一的布局样式，自行设置内外边距为0或auto或指定值可覆盖取消厂商的默认值，还可同时设置整个页面各个元素中文本字号的默认值。

    * { margin:0; padding:0; font-size:12px; } 

1 设置内边距—填充padding

内边距padding可以理解成“填充物”，是元素内容与边框间的区域，内边距区域的颜色与元素的背景颜色相同。

    padding-top:          上边距值;

    padding-bottom:   下边距值;

    padding-left:          左边距值;

    padding-right:        右边距值;

    padding:上边距 [ 右边距 下边距 左边距 ];   — 顺时针值复制

    属性值：auto自动(默认)、不同单位的数值、相对父元素宽度width的百分比%，但不允许是负值。

    例如假设元素总宽100px，每个边10px外边距和5px内边距：

     .box { width:70px; margin:10px; padding:5px; }

   注意：设置内外边距为百分比%时不论上下或左右都是相对父元素宽度width的百分比—且随父元素width的变化而改变。

2 设置外边距margin

    外边距margin是元素边框到相邻元素(或页面边界)的距离—是元素边框之外添加的透明区域—使用body的背景色。

    margin-top:       上边距值;

    margin-bottom:下边距值;

    margin-left:       左边距值;

    margin-right:    右边距值;

    margin:上边距 右边距 下边距 左边;   — 顺时针值复制

    属性值： auto自动(水平使用可自动居中)、不同单位的数值、相对父元素的百分比% ，可以使用负值缩进使相邻元素重叠(一般配合float浮动使用，见【例h8-6.html】演示)。

    例如h1各边设置1/4英寸空白：h1 { margin: 0.25in; }

    使用表格布局必须用align属性设置表格、单元格居中对齐，而在<div>布局中对于设置了宽度的元素使用margin:0 auto;即可自动设置左右外边距为相等大小，实现居中对齐。

    例如块级元素居中显示(必须设置宽度)，可设置外边距实现：

    div {width:300px; height:30px; margin:0 auto;  } 

3 垂直外边距的合并

    普通文档流中，两个相邻或内外元素相遇时其垂直方向的上下外边距将会自动合并发生重叠，外边距合并可以使都具有外边距的元素在相邻时能尽量占用较小的空间。

A．上下相邻元素的垂直外边距合并

B．内外包含元素的垂直外边距合并

如果没有内容的空元素有上下外边距但没有上下内边距和边框，则它自己的上下外边距也会发生合并。而且这个合并后的外边距遇到另一个垂直相邻元素还会再发生外边距合并。

（三）设置鼠标指针及其他样式

    cursor属性指定当鼠标放在元素边界范围内所显示的光标形状(CSS2.1没定义由哪个边界确定这个范围)。

    cursor:指针类型列表;

    可用逗号隔开指定多个指针类型，选择第一个可用的

属性值

描述

属性值

描述

auto(默认)

浏览器默认光标

url(图标文件)

自定义图标

default

默认—通常是箭头

 e-resize

东方箭头

pointer

链接指针(一只手)

 ne-resize

东北方

hand

手

 n-resize

北方

crosshair

精确定位—交叉十字

 nw-resize

西北方

wait

等待—Windows沙漏

 w-resize

西方

move

对象可被移动

 sw-resize

西南方

text

文本选择符号—光标

 s-resize

南方

help

带问号帮助选择

 se-resize

东南方