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

WebAdvocate 2010-07-28 04:11:16
加精
在 说说标准——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'属性不适用。
<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' 效果没有被定义。
<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)的面纱
<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标准中的值
<length>
偏移量是距离参照边的固定值。
<percentage>
偏移量是包含块宽度（对于'left'和'right'）或高度（对于'top' 和'bottom'）的百分比。对于'top'和'bottom'，如果包含块的高度没有显式指定（即它取决于内容的高度），百分比值将解释为'auto'。
auto
该值的效果取决于与之相关的属性中的哪一个也设置了'auto'。详细的内容请参见绝对定位，非替换元素的宽度和高度一节。后续会跟大家分享。

初始值：‘auto’

适用于：定位的元素，即 position特性的值为非 ‘static’的值。

可否继承 ：否

百分比值：百分比值基于包含块的高度(top, bottom)或者宽度(left, right)

计算值：对于position:relative 参见相对定位(后续会介绍)；对于position:static 取值auto；其他情况，如果值为长度，取相应的绝对长度，如果标值为百分比，取指定的值，否则，取auto。

定位作用的具体位置：对于绝对定位元素(absolutely positioned)的框，这四个特性的值表示，元素的外边界(margin边界)相对于 包含块 的边界的位移。

而对于相对定位元素(relatively positioned)的框，偏移量相对于它自己的相应的边界。比如，top是相对于它的顶边界，right相对于右边界。

更多说说标准系列帖子：
【分享】说说标准系列目录
...全文
4550 40 打赏 收藏 转发到动态 举报
写回复
用AI写文章
40 条回复
切换为时间正序
请发表友善的回复…
发表回复
tizll521 2010-08-06
  • 打赏
  • 举报
 回复
看过了 不过没啥感觉
Eric6 2010-08-04
  • 打赏
  • 举报
 回复
好贴 学习了
CBACB 2010-08-03
  • 打赏
  • 举报
 回复
学习了，帮顶一下啊
ruddnjs2010 2010-08-03
  • 打赏
  • 举报
 回复
好东西，学习了！
mochimo 2010-08-02
  • 打赏
  • 举报
 回复
[Quote=引用 38 楼 shadowwayne 的回复:]

不如看看权威指南
[/Quote]
据我所知权威指南里有疏漏，比如：它认为TABLE是行内替换元素。但是规范里没有明确指出，同时TABLE也不符合替换元素有内置宽高的描述特性。

楼主的帖里暂时还没看到类似这样的疏漏，这是我看到过最好的CSS基础知识介绍了。
bruclee123321 2010-08-02
  • 打赏
  • 举报
 回复
学习学习
saulkuozhan 2010-08-02
  • 打赏
  • 举报
 回复
好东西啊 顶上去 谢谢楼主
sheep186 2010-08-02
  • 打赏
  • 举报
 回复
收藏咯。
woshi556 2010-08-02
  • 打赏
  • 举报
 回复
呵呵，还得感谢你的翻译。
看那些E文的根本看不出你所翻译的这意思。
le56245100 2010-08-01
  • 打赏
  • 举报
 回复
写的很好，学习下~
黄金蛇 2010-08-01
  • 打赏
  • 举报
 回复
学习一下
x799489010 2010-08-01
  • 打赏
  • 举报
 回复
顶一下
峰子2017 2010-07-31
  • 打赏
  • 举报
 回复
收藏了！！！！！！！！！！！！！
zykissyan 2010-07-31
  • 打赏
  • 举报
 回复
说的不错，分享了。
shadowwayne 2010-07-30
  • 打赏
  • 举报
 回复
不如看看权威指南
孟子E章 2010-07-30
  • 打赏
  • 举报
 回复
以后这样的帖子最好发博客里，以后不再推荐
WebAdvocate 2010-07-30
  • 打赏
  • 举报
 回复
[Quote=引用 28 楼 xupeihuagudulei 的回复:]

我这里可以看到。
其实也不是什么大问题。
你图上写的是top:70px;left:50px;
而你style里写的却是这样。
<div id="B" style="position:relative;top:10px; left:20px;background-color:red;">B</div>
top:10px;left:20px;
所以刚开始我以为你贴错图了
[/Quote]thx，因为 10px 和20px 不够明显 所以改了下例子，结果，忘了更新帖子里的代码了
呵呵，已经改过
liufuxiao 2010-07-30
  • 打赏
  • 举报
 回复
很有用啊。
luzhen328 2010-07-30
  • 打赏
  • 举报
 回复
看看，学学。
hfdszs 2010-07-30
  • 打赏
  • 举报
 回复
好东西，学习了！
加载更多回复（20）
深入解读CSS3中transform变换模型的渲染
介绍 transform是通过一系列矩阵变换完成的，scale等transform-function都是对matrix的封装。 w3里的解释是，transform基于可视化格式模型（visual formatting model，这样翻译对不对啊）并为其绘制出一个坐标系，而且所有在这个坐标系内进行的操作，如向右向下，都是在这个坐标系内以像素方式表示 元素设置了transform并不会改变元素所在的文档流，其布局仍然受盒模型支配，因此这里的变换的效果是可以与浮动、定位并存的。 当元素设置了transform后，会为该元素定义一个坐标系，并且在该坐标系内进行矩阵变换，将变换结果映射到用户坐标系（也
【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之四：常规流中的Block formatting context
在上次分享的【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之三：定位体系概述中，大致介绍了可视化模型中的定位体系。其中，常规流是最为基础的。 这次就和大家分享常规流的一些布局要点和重要的概念。 在常规流中的框（boxes，元素形成的矩形区域），都属于一个格式化的上下文中，可能是块的，也可能是行内的，但不可能同时是行内的又是块的。块框参
说说标准——CSS核心可视化格式模型(visual formatting model)之九：浮动(Float)定位细则二

本帖接 【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之八：float 特性以及浮动(Float)定位细则一

6. 浮动框的顶边不可以高于源文档中先前元素产生的块框或浮动框的顶
例子最直接了：