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

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

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>visibility_CSS参考手册_web前端开发参考手册系列</title>
  6. <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com" />
  7. <meta name="copyright" content="www.doyoe.com" />
  8. <style>
  9. .test{visibility:hidden;}
  10. </style>
  11. </head>
  12. <body>
  13. <div style="background:#ccc;width:100px;height:100px"></div>
  14.  
  15. <div class="test">我不会出现在屏幕上</div>
  16. <div style="background:#ccc;width:100px;height:100px"></div>
  17. </body>
  18. </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. [algorithm] My rookie plan to start

    若干年后,经验有一些,但根基不牢靠.[algorithm] series 借助学习Standard Template Library: Algorithms的这段时期,在自己的算法和c++基础方面加些 ...

  2. 机器学习&数据挖掘笔记_20(PGM练习四:图模型的精确推理)

    前言: 这次实验完成的是图模型的精确推理.exact inference分为2种,求边缘概率和求MAP,分别对应sum-product和max-sum算法.这次实验涉及到的知识点很多,不仅需要熟悉图模 ...

  3. 使用 CSS & jQuery 制作一款漂亮的多彩时钟

    大家可能见过各种各样的时钟效果,比如多年前非常流行的 Flash 制作的各种新奇的动画时钟,现在的 Web 开发者们又开始应用 CSS3 和 Canvas 等最新技术来实现.而今天这里要分享的这款漂亮 ...

  4. RWD Table Patterns – 响应式表格解决方案

    在显示复杂的表格数据的时候,相信 Web 开发人员都碰到过显示不下的情况.RWD Table Patterns 是一个很好的响应式表格解决方案.它采用移动优先以及渐进增强的设计理念,在不支持响应式的浏 ...

  5. git代码回滚:Reset、Checkout、Revert的选择

    代码回滚:Reset.Checkout.Revert的选择 Zhongyi Tong edited this page on Dec 8, 2015 · 5 revisions Pages 19 Ho ...

  6. Javascript动画效果(三)

    Javascript动画效果(三) 前面我们已经介绍了速度动画.透明度动画.多物体运动和任意值变化,并且我们在Javascript动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的 ...

  7. LeetCode - 51. N-Queens

    51. N-Queens Problem's Link ------------------------------------------------------------------------ ...

  8. Rebalance Customer Balances Utility的使用

    用户不管是打开A/R Posted Transactions Detail还是A/R Posted Transactions Summary 窗口,均显示如下一个警示: 打开Currency Code ...

  9. C++宏和枚举

    宏 我们的计算器程序,用1234对应加减乘除,对于人阅读很产生一点障碍.隔一个月后再看此代码可能想不起是0123还是1234了,还得去代码中查找,如果能为代表四则运算的四个数取个有意义的别名就好了,一 ...

  10. JAVA获取CLASSPATH路径

    ClassLoader 提供了两个方法用于从装载的类路径中取得资源: public URL getResource (String name); public InputStream getResou ...