浅析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(<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的更多相关文章
- 浅析css布局模型1
css是网页的外衣,好不好看全凭css样式,而布局是css中比较重要的部分,下面来分析一下常见的几种布局. 流动模型 流动模型是网页布局的默认模式,也是最常见的布局模式,他有两个特点: 1.块状元素都 ...
- 熟悉HTML CSS布局模型
HTML最难的地方来了!这个我反复了很多遍, 包括现在写博客, 也对我自己算是一种温习, 我这块怕是没办法写的很好懂, 因为我自己还不能把我学到的准确通俗易懂的表达出来, 给自己记个笔记, 以后再来一 ...
- HTML+CSS学习笔记 (12) - CSS布局模型
标签:HTML+CSS css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是 ...
- 从零开始学习前端开发 — 6、CSS布局模型
一.css布局模型 1.流动模型(Flow) 元素在不设置css样式时的布局模型,是块元素就独占一行,是内联元素就在一行逐个进行显示 2.浮动模型(Float) 使用float属性来进行网页布局,给元 ...
- 从零开始学习html（十二）CSS布局模型——上
一.css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了. 布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之 ...
- CSS布局模型学习
转自:http://www.cnblogs.com/erliang/p/4092192.html CSS布局模型学习 参考链接慕课网:HTML+CSS基础课程 知识基础 1. 样式 内联 嵌入 外 ...
- CSS 布局模型
css布局模型 布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上.又不同于我们常说的 CSS 布局样式或 CSS 布局模板.假设说布局模型是本.那么 CSS ...
- 前端之CSS布局模型
一.css布局模型: 流动模型(Flow) 浮动模型(Float) 层模型(Layer) 1.流动模型: 页面在没有设置任何css样式,元素按照本身的特性在浏览器中显示,这样的布局模型称为流动模型: ...
- html学习第三天—— 第12章——css布局模型
清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...
随机推荐
- 构建自己的PHP框架--抽象框架的内容
上一篇博客中,我们搭建了一个最简单的框架,从单一入口的public/index.php进入,解析出相应的Controller和Action,去执行,渲染出相应的页面或者输出相应的数据. 但是我们可以看 ...
- 【特别推荐】Web 开发人员必备的经典 HTML5 教程
对于我来说,Web 前端开发是最酷的职业之一,因为你可以用新的技术发挥,创造出一些惊人的东西.唯一的问题是,你需要跟上这个领域的发展脚步,因此,你必须不断的学习,不断的前进.本文将分享能够帮助您快速掌 ...
- 【大数据】Summingbird（Storm + Hadoop）的demo运行
一.前言 为了运行summingbird demo,笔者走了很多的弯路,并且在国内基本上是查阅不到任何的资料,耗时很久才搞定了demo的运行.真的是一把辛酸泪,有兴趣想要研究summingbird的园 ...
- 多个ajax请求下等待条显示和隐藏的简单处理
处理为遇到ajax请求就显示等待条,直到所有的ajax请求执行完毕才关闭等待条.比较简单,源码如下(基于jQuery) //基于jQuery //从第一个ajax请求发出开始显示等待条?直到一系列aj ...
- TCP/IP详解学习笔记(13)-TCP坚持定时器，TCP保活定时器
TCP一共有四个主要的定时器,前面已经讲到了一个--超时定时器--是TCP里面最复杂的一个,另外的三个是: 坚持定时器 保活定时器 2MSL定时器 其中坚持定时器用于防止通告窗口为0以后双方互相等待死 ...
- Laravel4中的Validator
不管写接口还是写web页面,实质都是传入参数,然后进行业务逻辑,然后再输出具体内容.所以,对参数的验证是不可避免的一个环节,比如传过来的email是不是为空,是不是合法的email格式?laravel ...
- shell脚本二
在shell脚本一 中,我讨论了shell脚本的语法规范,shell脚本的变量,以及shell脚本的测试语句. 仅仅懂得这些只能写简单的脚本,在简单的脚本中各条语句按顺序执行,从而实现自动化的管理,顺 ...
- 【Swift学习】Swift编程之旅---集合类型之Sets（七）
Sets是存储无序的相同类型的值,你可以在顺序不重要的情况下使用Sets来替代数组,或者当你需要同一个值在集合中只出现一次时. 一.Sets类型语法 写作Set<Element>,Ele ...
- 个人作业-Week2：案例分析
截止时间:2016年9月25日24:00. 很多同学有误解,软件工程课是否就是理论课?或者是几个牛人拼命写代码,其他人打酱油的课?要不然就是学习一个程序语言,搞一个职业培训的课? 都不对, 软件工程有 ...
- 基于MVC4+EasyUI的Web开发框架经验总结（10）--在Web界面上实现数据的导入和导出
数据的导入导出,在很多系统里面都比较常见,这个导入导出的操作,在Winform里面比较容易实现,我曾经在之前的一篇文章<Winform开发框架之通用数据导入导出操作>介绍了在Winform ...