首页 > > 网页制作 > css >

CSS手册简编：布局属性

2008-02-23 08:31:36来源：互联网阅读 ()

CSS属性：

3、布局（Layout）属性：

在以前的HTML里，元素的位置只能靠元素的依次排列觉得，而在CSS里你可以更精确的定位元素。Netscape曾提出过Layer标记，它对于精确布局很有好处，但是并没有被W3C承认，W3C在CSS提出了类似于Layer标记的功能。

position属性：

position属性用来决定元素的位置类型，详见属性：

属性名称: 'position'
属性值: absolute | relative | static
初始值: static
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止
其属性值分别代表：
absolute：屏幕上的绝对位置。
relative：屏幕上的相对位置。
static：固有位置。

direction属性：

direction属性决定BOX的排列方向，详见属性：

属性名称: 'direction'
属性值: ltr| rtl
初始值: ltr
适合对象: 所有元素
是否继承: yes
百分比备注: 被禁止

float和clear属性：

在HTML中图片可以选择飘浮的位置，现在BOX对象通过CSS对于也可以选择飘浮的位置。改变BOX的float属性，BOX将飘浮在其他元素的左或右方：

属性名称: 'float'
属性值: left| right|none
初始值: none
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止

例如：

<STYLE type="text/css">
IMG { float: left }
BODY, P, IMG { margin: 2em }
</STYLE>
<BODY>
<P>
<IMG src=img.gif>
Some sample text that has no other...
</BODY>

相反的，使用clear属性将禁止元素在BOX的左方或右方飘浮：

属性名称: 'clear'
属性值: left| right|both|none
初始值: none
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止

绝对位置属性：

绝对位置属性有四个属性：top、right、bottom和left，属性值为长度单位或百分数：

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

利用以上属性，用户就可以精确定义元素的位置，如：

<P style="position: relative; margin-right: 10px; left: 10px;">
I used two red hyphens to serve as a change bar. They
will "float" to the left of the line containing THIS
<SPAN style="position: absolute; top: auto; left: 0px; color: red;">--</SPAN>
word.</P>

z-index属性：

在CSS中允许元素的重叠显示，这样就有一个显示顺序的问题，z-index属性描述了元素的前后位置，如果把电脑屏幕看作

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有