CSS手冊簡編:布局屬性

來源:互聯網
上載者:User
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;">
第 1 2 3 頁
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.