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

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

浅析css布局模型2的更多相关文章

  1. 浅析css布局模型1

    css是网页的外衣,好不好看全凭css样式,而布局是css中比较重要的部分,下面来分析一下常见的几种布局. 流动模型 流动模型是网页布局的默认模式,也是最常见的布局模式,他有两个特点: 1.块状元素都 ...

  2. 熟悉HTML CSS布局模型

    HTML最难的地方来了!这个我反复了很多遍, 包括现在写博客, 也对我自己算是一种温习, 我这块怕是没办法写的很好懂, 因为我自己还不能把我学到的准确通俗易懂的表达出来, 给自己记个笔记, 以后再来一 ...

  3. HTML+CSS学习笔记 (12) - CSS布局模型

    标签:HTML+CSS css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是 ...

  4. 从零开始学习前端开发 — 6、CSS布局模型

    一.css布局模型 1.流动模型(Flow) 元素在不设置css样式时的布局模型,是块元素就独占一行,是内联元素就在一行逐个进行显示 2.浮动模型(Float) 使用float属性来进行网页布局,给元 ...

  5. 从零开始学习html（十二）CSS布局模型——上

    一.css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了. 布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之 ...

  6. CSS布局模型学习

    转自:http://www.cnblogs.com/erliang/p/4092192.html CSS布局模型学习   参考链接慕课网:HTML+CSS基础课程 知识基础 1. 样式 内联 嵌入 外 ...

  7. CSS 布局模型

    css布局模型 布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上.又不同于我们常说的 CSS 布局样式或 CSS 布局模板.假设说布局模型是本.那么 CSS ...

  8. 前端之CSS布局模型

    一.css布局模型: 流动模型(Flow) 浮动模型(Float) 层模型(Layer) 1.流动模型: 页面在没有设置任何css样式,元素按照本身的特性在浏览器中显示,这样的布局模型称为流动模型: ...

  9. html学习第三天—— 第12章——css布局模型

    清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...

随机推荐

  1. js获取url地址中的参数

    <script type="text/javascript"> function GetQueryString(name) { var reg = new RegExp ...

  2. 数据结构：JAVA_二叉数查找树基本实现（上）

    数据结构:二叉数查找树基本实现(JAVA语言版) 1.写在前面 二叉查找树是一种能将链表插入的灵活性与有序数组查找的高效性结合在一起的一种数据结构. ..... 2.代码分解 2.1 对节点的结构定义 ...

  3. 可视化（番外篇）——SWT总结

    本篇主要介绍如何在SWT下构建一个应用,如何安装SWT Designer并破解已进行SWT的可视化编程,Display以及Shell为何物.有何用,SWT中的常用组件.面板容器以及事件模型等. 1.可 ...

  4. 苹果官方发布，iPhone 6 & Plus 设计素材

    苹果发布 iPhone 6 和 iPhone 6 Plus 有一段时间了,据说首日预定量达到了创纪录的1600万部,真是不可思议.苹果已经创建了一些指引,让开发者可以受益.他们已经发布了一组苹果官方的 ...

  5. c#字符串操作方法实例

    # 字符串是使用 string 关键字声明的一个字符数组.字符串是使用引号声明的,如下例所示: string s = "Hello, World!"; 字符串对象是“不可变的”,即 ...

  6. adb shell 查看系统属性（用来判断特殊的操作系统）

    一般来讲,在android程序开发中进行需要判断设备类型和系统版本 1.设备类型判断(android.os.Build.MODEL) 比如判断属于Google Nexus 5,Nexus 7,MIUI ...

  7. caffe 试运行MNIST

    转自:http://www.cnblogs.com/NanShan2016/p/5469942.html 编译完caffe后,在D:\caffe\caffe-master\caffe-master\b ...

  8. JavaScript可否多线程? 深入理解JavaScript定时机制

    JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如 setTimeout( ...

  9. 上传文件被nginx全部缓存的问题

    nginx采用1.5.6. 后端采用nodejs+formidable的方式接受上传文件,本问题的对应与采用什么样的后端没太大关系,这里只是交代一下. 问题: 在前端页面上将文件上传,nginx没有将 ...

  10. windows下用eclipse+goclipse插件+gdb搭建go语言开发调试环境

    windows下用eclipse+goclipse插件+gdb搭建go语言开发调试环境   http://rongmayisheng.com/post/windows%E4%B8%8B%E7%94%A ...