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

  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. Linux的学习--系统目录

    因为利用Linux来开发产品或distributions的社群/公司与个人实在太多了, 如果每个人都用自己的想法来配置文件放置的目录,那么将可能造成很多管理上的困扰. 你能想象,你进入一个企业之后,所 ...

  2. PHP的学习--解析URL

    PHP中有两个方法可以用来解析URL,分别是parse_url和parse_str. parse_url 解析 URL,返回其组成部分 mixed parse_url ( string $url [, ...

  3. Hadoop官方文档翻译—— YARN ResourceManager High Availability 2.7.3

    ResourceManager High Availability (RM高可用) Introduction(简介) Architecture(架构) RM Failover(RM 故障切换) Rec ...

  4. Example of BeanFactoryAware in Spring--转

    原文地址:http://www.concretepage.com/spring/example_beanfactoryaware_spring If a bean in spring implemen ...

  5. Oracle RMAN 备份一例

    Oracle RMAN备份一例: Solaris 10 + Oracle 11.2.0.3 Shell:csh,安装有bash,脚本调用bash 备份策略:周日0级备份,周一~周六1级备份,每6小时备 ...

  6. vs2010快捷键

    vs的快捷键包含部分代码的自动生成 VS2010 快捷键 全屏:Shift+Alt+Enter 注释选定内容:Ctrl+E+C/Crtr+E+U 代码格式化:ctrl+E+F VS2008 使用小技巧 ...

  7. 使用James搭建一个自己的邮箱服务器

    ---第一天开发--- 下载Apache James 3.0邮箱服务器,解压到响应的目录 可以看到目录结构: H:\code\JavaCode\James\apache-james-3.0-beta4 ...

  8. [译]学习IPython进行交互式计算和数据可视化(一)

    --学习IPython进行交互式Python编程.高性能数字计算和数据可视化 作者:Cyrille Rossant 译者:Tacey Wong 注:仅为个人翻译及学习,多有谬处,E文尚可的推荐阅读英文 ...

  9. Linux - 修复Ubuntu错误“System program problem detected”

    The error "System program problem detected" comes up when a certain application crashes. U ...

  10. iOS——使用StroryBoard页面跳转及传值

    之前在网上搜iOS的页面跳转大多都是按回以前的那种xib的形式,但鄙人是使用storyboard的.这篇就只介绍利用storyboard进行页面跳转与传值. 新建页面 iOS的程序也是使用了MVC的思 ...