浅析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.com" />
meta name="copyright" content="www.doyoe.com" />
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>
            

如图，被隐藏的部分仍然保留物理空间。

　　clip

rect(|auto |auto |auto |auto)：依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切。例如：clip:rect(0 auto 20px 20px);上边从0像素开始剪切，右边不剪切，下边从20像素开始剪切，左边开始从20像素开始剪切，剪切部分为透明的。注：该属性必须将position的值设置为absolute或fixed。

　　overflow

visible：不剪切内容。

hidden：将超出对象尺寸的内容进行裁剪，将不出现滚动条。

scroll：将超出对象尺寸的内容进行裁剪，并以滚动条的方式显示超出的内容。

auto：在需要时剪切内容并添加滚动条，此为body对象和textarea的默认值。 

此外还有两个属性 overflow-x和overflow-y相当于对overflow属性在x和y轴上分别进行设置。