解析四大DIV布局(Layout)属性用法

开发 前端
Netscape曾提出过Layer标记,它对于精确布局很有好处,但是并没有被W3C承认,W3C在CSS提出了类似于Layer标记的功能,这里向大家描述一下DIV布局(Layout)属性的用法。

在以前的HTML里,元素的位置只能靠元素的依次排列觉得,而在CSS里你可以更精确的定位元素,这里和大家分享一下DIV布局(Layout)属性,主要包括position属性,direction属性,float和clear属性等内容。

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中图片可以选择飘浮的位置,现在BOX对象通过CSS对于也可以选择飘浮的位置。改变DIV布局属性中BOX的float属性,BOX将飘浮在其他元素的左或右方:

属性名称:'float'

属性值:left|right|none

初始值:none

适合对象:所有元素

是否继承:no

百分比备注:被禁止

例如: 

  1. <STYLEtypeSTYLEtype="text/css"> 
  2. IMG{float:left}  
  3. BODY,P,IMG{margin:2em}  
  4. </STYLE> 
  5. <BODY> 
  6. <P> 
  7. <IMGsrcIMGsrc=img.gif> 
  8. Somesampletextthathasnoother...  
  9. </BODY> 
  10.  

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

属性名称:'clear'

属性值:left|right|both|none

初始值:none

适合对象:所有元素

是否继承:no

百分比备注:被禁止
 

【编辑推荐】

  1. clear属性在CSS中的妙用
  2. JavaScript动态创建div属性和样式
  3. 14大CSS工具提高网页设计效率
  4. 五大CSS3新技术用法指导
  5. 解读DIV CSS网页布局中CSS无效十个原因

 

 

责任编辑:佚名 来源: hi.baidu.com
相关推荐

2010-08-17 09:20:28

DIV布局

2010-08-17 10:31:10

DIV布局属性

2010-09-10 10:10:36

CSS属性

2010-09-02 15:12:28

CSS属性值选择器

2010-08-16 16:27:42

DIV布局属性

2010-08-13 14:45:58

Flex4布局

2010-09-14 17:33:55

DIV+CSS布局

2010-07-05 11:12:43

常用UML图

2010-07-14 14:46:57

Perl操作符

2010-08-17 09:31:08

DIV布局

2010-08-20 15:43:00

Div CSSSEO

2010-09-02 09:44:07

DIV+CSSSEO

2010-09-09 13:25:52

DIVScroll

2010-08-16 14:12:44

DIV+CSS

2010-09-03 13:02:04

CSSposition

2010-08-13 14:39:57

Flex布局

2010-09-15 14:00:06

position属性DIV

2010-08-16 10:18:53

DivCSS

2010-08-05 10:22:46

Flex效果

2010-08-16 11:05:54

DIV+CSS
点赞
收藏

51CTO技术栈公众号