PHP程序员站--PHP编程开发平台
 当前位置:主页 >> 网页制作 >> CSS >> 

css属性之2、BOX模型(BOX Model)属性

css属性之2、BOX模型(BOX Model)属性

来源:互联网  作者:  发布时间:2008-05-22
什么是 BOX ? CSS 把 HTML 中以 somesign /somesign 的部分称为
什么是BOXCSSHTML中以<somesign>……</somesign>的部分称为BOX(容器),BOX有三类属性:paddingmarginborder

Margin属性:

Margin属性分为margin-topmargin-rightmargin-bottommargin-leftmargin五个属性,分别表示BOX里内容离边框的距离,它的属性值是数值单位,可以是长度、百分比或automargin甚至可以设为负值,造成BOXBOX之间的重叠显示,关于margin的属性详见下表:

属性名称: 'margin-top''margin-right''margin-bottom''margin-left'
属性值: <margin-width>
初始值: 0
适合对象: 所有元素
是否继承: no
百分比备注: 相对于BOX的宽度

例如:

H1 { margin-top: 2em }
H2 { margin-right: 12.3% }

Margin还有一个快捷的书写方法,就是直接用margin属性,例如:

BODY { margin: 1em 2em 3em 2em}

等同于:

BODY {
margin-top:1em;
margin-right:2em;
margin-bottom:3em;
margin-left:2em;
}

margin属性后面可以有四个值,中间用空格隔开(记住不是逗号),顺序是"上右下左",当然margin后面可以不足四个值,例如:

BODY { margin: 2em } /* 所有的margin都设为2em */
BODY { margin: 1em 2em } /*
上下margin1em,右左margin2em */
BODY { margin: 1em 2em 3em } /*
margin1em,右左margin2em,下margin3em*/

Padding属性:

Padding属性用来描述BOX的边框和内容之间插入多少空间,和margin属性类似,它也分为上右下左和一个快捷方式padding,关于padding的属性详见下表:

属性名称: 'padding-top''padding-right''padding-bottom''padding-left' 'padding'
属性值: <padding-width>
初始值: 0
适合对象: 所有元素
是否继承: no
百分比备注: 相对于BOX的宽度

例如:

BLOCKQUOTE { padding-top: 0.3em }

padding属性和margin类似此处略去。

Border属性:

平时我们在查看HTML文档时,看到一段文字,并不会把它当作一个BOX,实际上BOX是有边框的,只是平时不显示出来罢了,而border属性就是用来描述BOX边框的。Border属性分为border-widthborder-colorborder-style,而这些属性下面又有分支。

border-width属性:

border-width属性又分为:border-top-widthborder-right-widthborder-bottom-widthborder-left-widthborder-width属性,border-width用长度表示为"thin/medium/thick"或长度单位表示,下面是border-width属性的详细列表:

属性名称: 'border-top-width''border-right-width''border-bottom-width''border-left-width''border-width'
属性值: <border-width>
初始值: medium
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止

border-width为快捷方式,顺序为上右下左,值之间用空格隔开。

border-color属性:

border-color属性用来显示BOX边框颜色,分为border-top-colorborder-right-colorborder-bottom-colorborder-right-colorborder-color属性,属性值为颜色,可以用十六进制表示,也可用rgb()表示,属性见下:
属性名称: 'border-top-color''border-right-color''border-bottom-color''border-left-color'
'border-color'

属性值: <color>
初始值: 元素颜色的初始值
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止

border-color为快捷方式,顺序为上右下左,值之间用空格隔开。

border-style属性:

border-style属性用来设置BOX对象边框的样式,它的属性值为CSS规定的关键字,平常看不到border是因为,初始值是none的缘故。属性见下:

属性名称: 'border-top-style''border-right-style''border-bottom-style''border-left-style''border-style'
属性值: <border-style>
初始值: none
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止

border-color为快捷方式,顺序为上右下左,值之间用空格隔开。

属性值的名称和代表意义如下:

none:无边框。
dotted:边框为点线。
dashed:边框为长短线。
solid:边框为实线。
double:边框为双线。
grooveridgeinsetoutset:显示不同效果的3D边框(根据color属性)。

border属性:

border属性为Border的快捷方式,属性值间用空格隔开,顺序是"边框宽度 边框样式 边框颜色",例如:

<h1 style="border:.5em outset red">hello!</h1>

还可以用border-topborder-rightborder-bottomborder-left分别作为上右下左的快捷方式,属性值顺序同border属性

Tags: 属性   box   css   C   模型  
最新文章
推荐阅读
月点击排行榜
PHP程序员站 Copyright © 2007-2010,PHPERZ.COM All Rights Reserved 粤ICP备07503606号