浅析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;100px;height:100px"></div>
    
<div class="test">我不会出现在屏幕上</div>
<div style="background:#ccc;100px;height:100px"></div>
</body>
</html>
            

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

  clip

rect(<number>|auto <number>|auto <number>|auto <number>|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轴上分别进行设置。

原文地址:https://www.cnblogs.com/wangxiaosan/p/5685383.html