浅析css布局模型2-html教程-PHP中文网

浅析css布局模型2

php中文网

发布： 2016-07-21 14:53:04

原创

1130人浏览过

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

　　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属性隐藏表格的行和列。

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="zh-cn"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="utf-8"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>visibility_CSS参考手册_web前端开发参考手册系列<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="author"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="Joy Du(飘零雾雨), dooyoe@gmail.com"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="copyright"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="www.doyoe.com"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
.test</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">visibility</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">hidden</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="background:#ccc;width:100px;height:100px"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="test"</span><span style="color: #0000ff;">></span>我不会出现在屏幕上<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="background:#ccc;width:100px;height:100px"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

登录后复制

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

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