当前位置: 代码迷 >> 跨浏览器开发 >> 说说标准——CSS核心可视化格式模型(visual formatting model)之三:定位体系概述
  详细解决方案

说说标准——CSS核心可视化格式模型(visual formatting model)之三:定位体系概述

热度:4573   发布时间:2013-02-26 00:00:00
【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之三:定位体系概述
在 说说标准——CSS中非常重要的可视化格式模型(visual formatting model)简介 中,曾经提到了:在可视化格式模型中,每一个元素都会根据盒子模型产生0个或多个box,而这些box的布局会受四大因素的影响,其中之一,就是定位体系,个人感觉,这是对布局影响最大的因素。

CSS2.1中,一个框(box,就是元素形成的方块等)可以根据三种定位体系布局。CSS2.1中的定位体系帮助作者使他们的文档更容易理解,并不需要使用标记的手段(如,不可见的图片)达到布局的效果。

常规流(Normal flow)
常规流,是对 normal flow的直译。
流者,动也。偏旁是三点水,说明,跟水有关系,水的流动是连续不间断的,也是有先后顺序的。在这里,我们把它当作可以流动的(位置可变),有先后顺序(元素顺序加载)的体系。在文档加载的时候,好像流水似的,一点点的漫过整个画布。还有一种说法是,浏览器在解析HTML CSS JS 的时候的一个流式的过程,从html起始标签开始 到html结束标签截止。
之所以是常规,是因为,这是相对于后面的浮动和定位的一个概念,浮动和定位元素都脱离了当前的常规流。
在 CSS2.1中,常规流包括块框(block boxes)的块格式化(blok formatting 后续会讲到),行内框(inline boxes)的行内格式化(inline formatting 后续会讲到),块框或行内框的相对定位,以及插入框的定位。以上包含范围现在不理解没关系,后续在介绍常规流时会详细介绍。

浮动(Floats)
浮动,顾名思义,相对于常规流来讲,它漂浮在常规流的上方。
在浮动模型中,一个框(box)首先根据常规流布局,再将它从流中取出并尽可能地向左或向右偏移。内容可以沿浮动区的侧面排列。

绝对定位(Absolute positioning)
在绝对定位模型中,一个框(box)整个地从常规流向中脱离(它对后续的兄弟元素没有影响),并根据它的包含块来分配其位置。

选择定位方案:”position”特性
‘float’和’position’特性决定了使用哪种CSS2.1定位算法来计算框的位置。

'position'


特性值的含义

static
该框(box)是一个常规框,布局根据常规流(见上述说明)。'left' 、’right’、’bottom’和 'top'属性不适用。
HTML code
<div style="position:static;"></div>
如上代码,设置了静态布局,如果 ‘position’没有设置,默认值也是’static’。这时,设置'left' 、’right’、’bottom’和 'top’,无效。

relative
框的位置根据常规流计算(被称为常规流中的位置)。然后框相对于它的常规位置而偏移。如果框 B 是相对定位的,其后框的定位计算并不考虑B的偏移。 table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, 和 table-caption 元素的'position:relative' 效果没有被定义。
HTML code
<div style="position:static; width:100px;">    <div id="A" style="background-color:green;">A</div>    <div id="B" style="position:relative;top:70px; left:50px;background-color:red;">B</div>    <div id="C" style="background-color:blue;">C</div></div>
根据标准,B 的位置应该相比自身原位置偏移,而 C 在放置的时候,会当 B 仍然在原位置。
示意图:

注意,相对定位的元素处于常规流中,没有脱离常规流。

absolute
框的位置(可能还有它的尺寸)是由'left','right','top'和'bottom'特性决定。这些特性指定了框相对于它包含块(绝对元素包含块的判断,见:【分享】说说标准——可视化格式模型(visual formatting model)之一:包含块(containing block) )的偏移量。绝对定位的框从常规流向中脱离。这意味着它们对其后的兄弟元素的定位没有影响。另外,尽管绝对定位框有外边距(margin),它们不会和其它任何 margin 发生折叠(Collapsing margins)。见:【分享】说说标准 —— 揭开外边距折叠(Collapsing margins)的面纱
HTML code
<div style="position:absolute; width:300px; border:2px solid yellow;">    <div id="A" style="background-color:green;height:50px;">A</div>    <div id="B" style="position:absolute;top:70px; left:50px; height:50px; background-color:red;">B</div>    <div id="C" style="background-color:blue;height:50px;">C</div></div>

示意图:

有没有发现B变的很短?A和C的长度都跟包含他们的父元素长度一样,为什么B变短了呢?先卖个关子,在介绍自动宽度的计算时,会跟大家分享这个问题的答案。

fixed
框位置的计算根据'absolute'模型,不过框要额外地根据一些参考而得到固定。跟绝对定位一样,fixed定位元素的margin不会和任何其他 margin发生margin折叠。应用于手持终端、投影设备、屏幕、TTY、电视媒体类型时,框相对于 viewport 固定,滚动时不移动。应用于打印媒介类型时,框被渲染于每一页,并相对于页框固定,就好象是通过viewport查看该页一样(例如,打印预览)。对于其他的媒介类型,表现没有被定义。

对根元素的 position,用户端(UA)可以视为“static”。

框偏移: 'top','right','bottom','left'

如果一个元素的'position'特性值不是'static',该元素被称为定位元素。定位的元素生成定位框,其定位基于四个特性:'top','right','bottom','left'。

值:这四个特性的值可以是:<length> | <percentage> | auto | inherit 之一,关于值,请参见:【分享】说说标准——CSS标准中的值
  相关解决方案
本站暂不开放注册!
内测阶段只得通过邀请码进行注册!