解析四大DIV布局(Layout)屬性用法
在以前的HTML里,元素的位置只能靠元素的依次排列覺得,而在CSS里你可以更精確的定位元素,這里和大家分享一下DIV布局(Layout)屬性,主要包括position屬性,direction屬性,float和clear屬性等內(nèi)容。
DIV布局(Layout)屬性:
在以前的HTML里,元素的位置只能靠元素的依次排列覺得,而在CSS里你可以更精確的定位元素。Netscape曾提出過Layer標記,它對于精確布局很有好處,但是并沒有被W3C承認,W3C在CSS提出了類似于Layer標記的功能。
◆position屬性:
DIV布局屬性中position屬性用來決定元素的位置類型,詳見屬性:
屬性名稱:'position'
屬性值:absolute|relative|static
初始值:static
適合對象:所有元素
是否繼承:no
百分比備注:被禁止
其屬性值分別代表:
absolute:屏幕上的絕對位置。
relative:屏幕上的相對位置。
static:固有位置。
◆direction屬性:
DIV布局屬性中direction屬性決定BOX的排列方向,詳見屬性:
屬性名稱:'direction'
屬性值:ltr|rtl
初始值:ltr
適合對象:所有元素
是否繼承:yes
百分比備注:被禁止#p#
◆float和clear屬性:
在HTML中圖片可以選擇飄浮的位置,現(xiàn)在BOX對象通過CSS對于也可以選擇飄浮的位置。改變DIV布局屬性中BOX的float屬性,BOX將飄浮在其他元素的左或右方:
屬性名稱:'float'
屬性值:left|right|none
初始值:none
適合對象:所有元素
是否繼承:no
百分比備注:被禁止
例如:
- <STYLEtypeSTYLEtype="text/css">
- IMG{float:left}
- BODY,P,IMG{margin:2em}
- </STYLE>
- <BODY>
- <P>
- <IMGsrcIMGsrc=img.gif>
- Somesampletextthathasnoother...
- </BODY>
◆相反的,使用clear屬性將禁止元素在BOX的左方或右方飄浮:
屬性名稱:'clear'
屬性值:left|right|both|none
初始值:none
適合對象:所有元素
是否繼承:no
百分比備注:被禁止
【編輯推薦】
- clear屬性在CSS中的妙用
- JavaScript動態(tài)創(chuàng)建div屬性和樣式
- 14大CSS工具提高網(wǎng)頁設計效率
- 五大CSS3新技術(shù)用法指導
- 解讀DIV CSS網(wǎng)頁布局中CSS無效十個原因