Css+div.docx

例10.1

二、盒子模型

盒子模型

例10.2

例10.3

1、Padding属性：

定义和用法

padding简写属性在一个声明中设置所有内边距属性。

说明

这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。

行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。

元素的背景会延伸穿过内边距。

不允许指定负边距值。

注释：

不允许使用负值。

例子1

padding:

10px5px15px20px;

∙上内边距是10px

∙右内边距是5px

∙下内边距是15px

∙左内边距是20px

例子2

padding:

10px5px15px;

∙上内边距是10px

∙右内边距和左内边距是5px

∙下内边距是15px

例子3

padding:

10px5px;

∙上内边距和下内边距是10px

∙右内边距和左内边距是5px

例子4

padding:

10px;

2、margin属性：

同padding属性

Margin用法举例：

横向：

例10.9纵向：

例10.10

父子块：

例10.11

三、元素的定位

1、float定位

Float:

left;right;none

设置元素向左、右浮动，元素即向其父元素的左侧或右侧靠紧。

例10.4

（1）Son1设置float：

left后，块son1宽度：

内容本身+自己的padding

块son1左端位置：

父块的padding-left+自己的margin-left

注：

son1块内容不属于父块了；且son2块效果上是环绕着son1块的。

（2）Son1和son2均设置float：

left后，两者将并排向父块左侧靠近，son2不再环绕son1.

如例10.4-1

（3）Clear属性：

Clear:

left;right;both;消除对float的影响。

例10.5

常用于网页最下端的“脚注”部分。

2、position定位

position:

static;absolute;relative;fixed;

分别表示：

原位；绝对位置；相对位置（相对于父块）；

（1）position:

absolute;

例10.6定义后脱离父块

其中top、right、bottom、left均是配合position属性使用的，表示块的上、右、下、左边界离页面边框的距离。

可用绝对像素或者用百分比。

注：

为避免冲突，建议设置块的width、height定义宽度和高度；left、right只用其一，top、bottom只用其一。

（2）position:

relative;

例10.7定义后隶属于父块

其中top、right、bottom、left是配合position属性使用的，表示块的上、右、下、左边界在父块内的位置。

（到父块边框要加上父块padding值）

注：

定义后的位置是相对于定义前的原位置的变化。

如例10.7-1

3、z-index空间位置

当块设置了position属性时，便可设置z-index属性。

z-index属性值越大的块越在上方。

4、综合实例：

例10.8图片签名

例10.9文字阴影效果

CSS+div布局方法

步骤：

以上的class属性值少了其中一个都无法将字体显示为蓝色！

将以上规则放在一起，比较起来会清晰一点：

1 div.contain .blue{color:

blue;}/*后代选择器*/

2 div.contain.blue{color:

blue;} /*多类选择器*/

以上两种规则分别应用的元素如下：

1 containblue

--后代-->

2 contain and blue