可视化格式模型( Visual formatting model)再学习

标签: css run-in box Visual formatting model 包含块 可视化格式模型 | 发表时间:2015-04-16 03:41 | 作者:Jace
分享到:
出处:http://www.topcss.org

“理论不懂就实践,实践不会就学理论”,非常赞同bluedavy的这句话。实践过程中经常会遇到某个属性的使用,浏览器渲染效果与预期效果不符,虽然通过死记硬背能避免或巧妙应用这种效果,但总感心虚发慌、毫无自信,因为不知晓背后的原理。这时就不要再用“就是这样的”的借口来搪塞自己,我们需要重新认识它。

场景: DEMO

  • 元素A,C绝对定位,不设置top,bottom值;
  • 元素B处于常规流中;

问题:为什么元素C的位置受元素B的影响,跟随在元素B的下方?
abs-top-bottom-auto

为了解决这个问题,我重新学习了CSS 2.1规范中的 9 Visual formatting model10 Visual formatting model details

这两章讲解了可视化格式模型:用户代理在视觉媒体上如何处理文档树。在可视化格式模型中,文档树中的每个元素根据框模型(box modal)生成0或多个框。这些框的布局由以下因素决定:

  • 框尺寸和类型
  • 定位方案(常规流、浮动和绝对定位)
  • 文档树中元素之间的关系
  • 外部信息(比如viewport尺寸、图像的固有尺寸等)

9.1.2 Containing blocks(包含块)

CSS 2.1中,许多框的位置和尺寸的计算是相对于一个矩形框的边缘,这个矩形框称为 包含块。通常情况下,生成框是后代框的包含块(generated boxes act as containing blocks for descendant boxes;),称之为一个框为其后代创建了包含块。短语“一个框的包含块”指的是“这个框存在其中的包含块”,而非它生成的框。

每个框会相对于其包含块赋予位置,但它并不囿于包含块,可能会溢出(overflow)。包含块的尺寸计算细节在第10章有详细介绍。

9.2 Controlling box generation(控制框生成)

本节描述了CSS 2.1中可生成的框类型。一个框的类型部分地影响其在可视化格式模型中的行为。

9.2.1 Block-level elements and block boxes

处在块格式化环境(BFC,block formatting context)中的框称之为 块级框(block-level box)。每个块级元素生成一个包含后代框和生成的内容的主体块级框,同时这个框与定位方案密切相关。有些块级元素除了生成主体框外,还会生成一个附加框,如’list-item’元素。附加框相对于主体框定位。

表框(table boxes)和替换元素(replaced elements)外,块级框同时也是 块容器框(block container box)。块容器框要么仅包含块级框,要么建立一个行内格式化环境(IFC,inline formatting context),即仅包含行内级框。并非所有的块容器框都是块级框:非替换行内块(inline blocks)和非替换表格单元格都是块容器,但不是块级框。既是块级框也是块容器的框称为 块框(block box)

“块级框”、“块容器框”和“块框”这三个术语有时被简称为 块(block)

9.2.3 Run-in boxes(插入型框)

CSS Level 3的 CSS basic box model中定义。

run-in框的行为如下:

  1. 如果run-in框包含一个块框,那么run-in框变为块框。
  2. 如果run-in框的后继兄弟元素为块框(非浮动,非绝对定位),那么run-in框变为该块框的第一个行内框。run-in不能插入本身为run-in的块中,也不能插入块中已有run-in的块中。
  3. 否则,run-in框变为块框。

浏览器支持:IE8+,chrome(不支持,难道是太鸡肋?)

DEMO(IE下查看)

run-in-box

9.3.2 Box offsets: ‘top’, ‘right’, ‘bottom’, ‘left’

  • (绝对、固定)定位元素会生成一个定位框(positioned box),根据top,right,bottom,left布局。
  • 初始值为 auto,非0。(文章开头的问题中未设置四值,等同设置为auto
  • 对于绝对定位元素,四值指定的是元素margin边与包含块的边之间的偏移量。对于相对定位元素,四值指定的是相对于自身框边的偏移量。

9.6 Absolute positioning

  • 从常规流中完全抽离,对其后继兄弟元素无影响。
  • 固定定位是绝对定位的特例,它的包含块是viewport。

9.7 Relationships between ‘display’, ‘position’, and ‘float’

这三个属性影响了框的生成和布局,相互影响如下:

  1. 如果’display’值为’none’,同时不设置’position’和’float’,那么该元素不生成框。
  2. 否则,如果’positon’值为’absolute’或’fixed’,即框为绝对定位,’float’的计算值为’none’,并且’display’根据下表设置。那么该框的位置由’top’,’right’,’bottom’,’left’和框的包含块决定。
  3. 否则,如果’float’的值不为’none’,那么该框会浮动,’display’根据下表设置。
  4. 否则,如果该元素为根元素,’display’根据下表设置。
  5. 否则,剩余的’display’属性值与指定值相同。
指定值 计算值
inline-table table
inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block block
others same as specified

10.6 Calculating heights and margins(高度和margin值计算)

10.6.4 Absolutely positioned, non-replaced elements(绝对定位的非替换元素)

静态位置(static position),粗略地讲是指一个元素在常规流中的位置。精确地讲,一个元素的静态top值,是指包含块顶部边沿与该元素的假想框的顶部margin边沿之间的距离。 假想框是指如果该元素的’position’值为’static’,以及’float’值为’non’且’clear’值为’none’时,该元素的第一个框。

对于绝对定位的元素,垂直尺寸的使用值必须满足下面约束:

‘top’ + ‘margin-top’ + ‘border-top-width’ + ‘padding-top’ + ‘height’ + ‘padding-bottom’ + ‘border-bottom-width’ + ‘margin-bottom’ + ‘bottom’ = height of containing block

如果’top’,’bottom’,’height’值均为auto,那么’top’值为元素的静态位置。(这也就回答了文章开头的问题

如果三个值均不为auto,那么:

  • 如果’margin-top’和’margin-bottom’值均为’auto’,那么假定margin-top和margin-bottom两值相等,然后再解上面方程式。(可以利用这点实现垂直居中的效果, 查看DEMO 
  • 如果’margin-top’和’margin-bottom’值中其一为’auto’,解上面方程式获取该margin值。
  • 如果数值超过限制,忽略’bottom’值,解方程式获取该值。

否则,从以下六种规则中挑选适用情况:

  1.  ‘top’和’height’为’auto’,’bottom’不为’auto’,那么’height’基于其内容根据 10.6.7规则计算,’margin-top’值设为’auto’,’margin-bottom’值设为0,解方程式得’top’值。
  2.  ‘top’和’bottom’为’auto’,’height’不为’auto’,那么设置’top’值为其静态位置,’margin-top’值设为’auto’,’margin-bottom’值设为0,解方程式得’bottom’值。
  3.  ‘bottom’和’height’为’auto’,’top’不为’auto’,那么’height’基于其内容根据 10.6.7规则计算,’margin-top’值设为’auto’,’margin-bottom’值设为0,解方程式得’bottom’值。
  4.  ‘top’值为’auto’,’bottom’和’height’不为’auto’,那么’margin-top’值设为’auto’,’margin-bottom’值设为0,解方程式得’top’值。
  5.  ‘height’值为’auto’,’bottom’和’top’不为’auto’,那么’margin-top’值设为’auto’,’margin-bottom’值设为0,解方程式得’height’值。
  6.  ‘bottom’值为’auto’,’height’和’top’不为’auto’,那么’margin-top’值设为’auto’,’margin-bottom’值设为0,解方程式得’bottom’值。

相关 [可视化 格式 模型] 推荐:

可视化格式模型( Visual formatting model)再学习

- - 进步博客
“理论不懂就实践,实践不会就学理论”,非常赞同bluedavy的这句话. 实践过程中经常会遇到某个属性的使用,浏览器渲染效果与预期效果不符,虽然通过死记硬背能避免或巧妙应用这种效果,但总感心虚发慌、毫无自信,因为不知晓背后的原理. 这时就不要再用“就是这样的”的借口来搪塞自己,我们需要重新认识它. 元素A,C绝对定位,不设置top,bottom值;.

elya:思维可视化4类模型

- - 落花流水——elya妞╰_╯
人的思考过程,是一个奇妙的过程,思维在脑海里流窜,横冲直撞又反复纠缠,最后扭成一团麻. 所以常常会有人抱怨,脑袋里很乱,想不出头绪. 这是因为,大部分人的思考过程都是杂乱无序的,没有逻辑的,最后也没法形成有效的沉淀,更无法找到清晰的结论. 那么本文要讲述的,就是怎样把思维进行可视化的规整,最终系统化的沉淀下来,找到其中有价值的方向.

数据可视化

- Sillywolf - ISD Webteam

可视化编程

- - 酷 壳 - CoolShell.cn
本文来自《 Visual Programming Languages – Snapshots》,作者 Eric Hosick收集了一堆关于可视化编程的工具,好多我都听都没听说过,我一股脑的全转过来,给大家看看,算是开开眼界了. 本文也是参考了Wikipedia的  Visual Programming Language 词条.

数据可视化

- - 人月神话的BLOG
推荐阅读知乎的关于有哪些可视化工具推荐的回答,内容已经相当全面了. 要注意的是当前主流的仍然是基于javasrcirpt开发的图表库,对于偏重的flex不应该做为选择的基础. 下面对一些选择的思路做些简单的说明. 首先可选的主流图表库包括了百度的 Echart,Highchart,D3.js这三个.

大数据的可视化

- - CSDN博客云计算推荐文章
       现在数据管理面临的一个关键性问题是如何将这些海量的来自于四面八方的非结构化数据可视化. 不管你从事于什么行业或者正在从事于哪一方面的研究,正将是你经常会触及的问题. 最近,埃里克•奥彭肖和JR里根做客了商务博客的“金融时代”专栏,讨论的主题为“大数据可视化是‘大数据’的关键机会”,分析了今天大数据的使用者们面临的可视化问题,以及公司为应对这个挑战而付诸的一些创新的方法.

可视化系统搭建

- - 腾讯ISUX – 社交用户体验设计
如何搭建数据可视化系统,用丰富的设计语言清晰表达复杂和庞大数据,并形成鲜明的设计风格. 我们把数据可视化的元素进行拆分并建立相应的规范体系. 六种基本图表涵盖了大部分图表使用场景,也是做数据可视化最常用的图表类型:. 柱状图   分类照片照片什么照片什么什么项目之间的比较;. 饼图   构成即部分占总体的比例;.

Visual.ly:可视化数据探索平台

- kaichun - TechWeb 新酷网站 RSS阅读
Visual.ly相关图片(图片来源:Techweb.com.cn).   【TechWeb报道】4月12日消息,新酷网站:可视化数据探索平台Visual.ly.   我们生活在数据收集和内容创作的时代. Visual.ly正是这个数据时代当产物,一个全新的可视化信息图形新平台. 信息图形将极大的刺激视觉表现,促进用户间相互学习、讨论.

可视化的排序过程

- 天下 - 酷壳 - CoolShell.cn
下面是一个日本程序员制做的一个可视化的排序过程,包括了各种经典的排序算法,你可以调整速度和需要排序的个数. 酷壳以前也介绍过几篇相关的文章 一个排序算法比较的网站,一个显示排序过程的Python脚本 关于各种排序算法的运行复杂度比较,请参看Wikipedia的排序算法比较. 2010年07月12日 -- 一些重要的算法.

信息可视化(视觉化) 设计

- 虫虫 - 图研所-infographics-图表设计-信息图表-信息设计-信息视觉化专业网站
信息可视化(视觉化)是用一种人脑容易识别的形式,通过图形化的手段来传达知识、建议或者强制性的命令. 下面这张图为你剖析一下信息可视化. David McCandless的新作,还是用金字塔形讨论数据到信息到知识再到智慧的整个视觉认知体系http://www.informationisbeautiful.net/2010/data-information-knowledge-wisdom/.