浅析css布局模型2

上节对整个布局模型进行了概述，这节先谈一下布局模型的几个属性。

　　 z-index属性

该属性是检索或设置对象的层叠顺序，默认值为auto，遵循其父对象的定位。

并级的对象，该属性的值越大，则被层叠在最上面，如两个对象的属性该值相同，则依据文档流的顺序，先写的将会被覆盖，必须定义对象的position属性值为relative,absolute或fixed,该值才会生效。

　　 top,right,bottom,left

这四个属性均表示对象的相对偏移量，默认值为auto，同样需要定义position属性的值为relative,absolute或fixed。

　　 dispaly

列出几个display属性常用取值。

none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间

inline：指定对象为内联元素。

block：指定对象为块元素。

inline-block：指定对象为内联块元素。

box：将对象作为弹性盒模型显示。

inline-box：将对象作为内联块级弹性盒模型显示。

　　 float

该属性的取值有none，left，right。当取值不为none引起对象的浮动时，对象将会被视为块对象，即display的值会被视为block。

　　 clear

none：允许两边都可以有浮动对象

both：不允许有浮动对象

left：不允许左边有浮动对象

right：不允许右边有浮动对象

忽略属性值方向的浮动属性，将其看作标准文档流进行排版。

　　 visibility

默认值为visible，设置对象可见。值为hidden时设置对象隐藏，collapse属性隐藏表格的行和列。

   DOCTYPE html  > 
   html   lang  ="zh-cn"  > 
   head  > 
   meta   charset  ="utf-8"   /> 
   title  > visibility_CSS参考手册_web前端开发参考手册系列   title  > 
   meta   name  ="author"   content  ="Joy Du(飘零雾雨), dooyoe@gmail测试数据"   /> 
   meta   name  ="copyright"   content  ="HdhCmsTestdoyoe测试数据"   /> 
   style  >  
.test  {  visibility  :  hidden  ;  } 
   style  > 
   head  > 
   body  > 
       div   style  ="background:#ccc;width:100px;height:100px"  >  div  > 
    
   div   class  ="test"  > 我不会出现在屏幕上   div  > 
   div   style  ="background:#ccc;width:100px;height:100px"  >  div  > 
   body  > 
   html  > 
             

查看更多关于浅析css布局模型2的详细内容...