RSS订阅
PHP程序员站--WWW.PHPERZ.COM  
网站地图
高级搜索
收藏本站
 当前位置:主页 >> 网页制作 >> CSS >> 文章内容
css属性之2、BOX模型(BOX Model)属性
[收藏此页[打印本页]   
来源:互联网  作者:  发布时间:2008-05-22

什么是BOXCSSHTML中以<somesign>……</somesign>的部分称为BOX(容器),BOX有三类属性:paddingmarginborder

Margin属性:

www.phperz.com

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

php程序员之家

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

php程序员站

例如: www.phperz.com

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

php程序员站

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

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

php程序员站

等同于:

www~phperz~com

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

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

php程序员站

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

phperz.com

Padding属性: php程序员之家

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

phperz.com

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

phperz~com

例如: phperz.com

BLOCKQUOTE { padding-top: 0.3em } phperz.com

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

Border属性:

www.phperz.com

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

phperz.com

border-width属性:

www~phperz~com

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

www.phperz.com

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

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

border-color属性:

www.phperz.com

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'

www.phperz.com

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

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

border-style属性:
www.phperz.com

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

phperz~com

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

www.phperz.com

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

php程序员站

属性值的名称和代表意义如下: php程序员之家

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

border属性: phperz~com

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

phperz.com

<h1 style="border:.5em outset red">hello!</h1> php程序员站

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

phperz.com


 
 相关文章
 
发表评论
全部评论(0条)
 
 站内搜索
 热门搜索 基础  mysql  adodb  url
高级搜索 网站地图 站长工具 IP查询 收藏本站
 热点文章
 随机推荐
网站首页 | 网站地图 | 高级搜索 | RSS订阅
PHP程序员站 Copyright © 2007,PHPERZ.COM All Rights Reserved 粤ICP备07503606号 联系站长