DIV的属性 - 百度文库

DIV

的属性

⼀、常⽤属性

、

Height:

设置

DIV

的⾼度；

Width:

设置

DIV

的宽度。

、

margin:

⽤于设置

DIV

的外延边距，也就是到⽗容器的距离。

margin:

后⾯跟有四个距离分别为到⽗容器的上

右

下

左边的距离；

margin:

[top][right][bottom][left]

可以分别设置：

margin-left:

到⽗容器左边框的距离；

margin-right:

到⽗容器右边框的距离；

margin-top:

到⽗容器上边框的距离；

margin-

bottom:

到⽗容器下边框的距离。

、

padding:

⽤于设置

DIV

的内边距（内如⼦元素与

DIV

边界的距离）。

padding:

后⾯跟有四个距离分别为到⽗容器的上

右

下

左边的距离；

margin: [top][right][bottom][left]

：需要注意的是

padding

设置的距离不包括在本⾝的

width

和

height

内

(

在

IE7

和

中

)

，⽐如⼀个

DIV

的

width

设

置了

100px,

⽽

padding-left

设置了

50px,

那么这个

DIV

在页⾯上显⽰的将是

150px

宽。

、

border:

设置

DIV

的边框样式；

display:

设置显⽰属性。其值有

block

、

none

；

float:

设置

DIV

在页⾯上的流向，其值有

left(

靠左显⽰

)

、

right(

靠右显⽰

)

、

none

；

background:

设置

DIV

的背景样式；

background

后可直接跟背景的颜⾊、背景图⽚、平铺⽅式等样式。也可以⽤以下属性分别设置。

background-color:

设置背景颜⾊；

background-attachment:

背景图像的附加⽅式，其值有

scroll

、

fixed; background-image:

指定使有的背

景图⽚

;background-repeat:

背景图象的平铺⽅式。其值有

no-repeat(

不平铺

)

、

repeat(

两个⽅向平铺

)

、

repeat-x(

⽔平⽅向平铺

)

、

repeat-y(

垂

直⽅向平铺

); background-position:

在

DIV

中定位背景位置。其值有

top bottom left right

的不同组合。也可以以⽤坐标指定具体的位置。

、

position:

设置

DIV

的定位⽅式。

position

的属性中有

static

、

fixed

、

relative

、

absolute

四个属性。常⽤

relative

和

absolute

。若指定为

static

时，

DIV

遵循

HTML

规则；若指定为

relative

时，可以⽤

top

、

left

、

right

、

bottom

来设置

DIV

在页⾯中的偏移（相对于⾃⾝的偏移），但是此时

不可使⽤层；若指定为

absolute

时，可以⽤

top

、

left

、

right

、

bottom

对

DIV

进⾏绝对定位（对⾃⼰最近的⽗级元素）；若指定为

fixed

时，在

IE7

与

中

DIV

的位置相对于屏屏固定不变，

IE6

中没有效果（不知为什么）。

、

font:

指定

DIV

中⽂本的样式，其后可跟⽂本的多个样式。

font-family:

设置要⽤的字体名称；

font-weight:

指定⽂本的粗细

其值有

bold

bolder lighter

等；

font-size:

指定⽂本的⼤⼩；

font-style:

指定⽂本样式，其值有

italic normal oblique

等；

color:

指定⽂本颜⾊；

text-align:

指定

⽂本⽔平对齐⽅式，其值有

center(

居中

) left right justify

；

text-decorator:

⽤于⽂本的修饰；其值有

none underline overline line-through

和

blink

的组合；

text-indent:

设置⽂本的缩进；

text-transform:

设置⽂本的字母⼤⼩写。其值有

lowercase uppercase capitalize(

⾸字母⼤写

)

none

；

direction:

内容的流向。其值有

ltr(

从左⾄右

)

、

rtl(

从右⾄左

)

；

line-height:

指定⽂本的⾏⾼；

Word-spacing:

字间距。

、

overflow:

内容溢出控制，其值有

scroll(

始终显⽰滚动条

)

、

visible(

不显⽰滚动条，但超出部分可见

)

、

auto(

内容超出时显⽰滚动条

)

、

hidden(

超出时隐藏内容

)

。

⼆、⼀些特殊效果：

、

z-index:

设置

DIV

的层叠顺序。

⽤

z-index

属性时，

position

必需要指定为

absolute

才⾏

。

、

cursor:

设置

DIV

上光标的样式。

、

clip:

设置剪辑矩形。

clip:rect(top right bottom left);

设置上下左右的距离

但此时要把

position

指定为

absolute

。

、

opacity

透明度

filter:alpha(opacity=value) eg

：

filter:alpha(opacity=50);opacity:0.5;