CSS 三种定位方式以及格式化上下文详解

CSS中影响布局的最重要因素便是定位体系,在布局时,根据三种定位体系定位可分为,常规流、浮动和绝对定位。

而格式化上下文指的是初始化元素定义的环境。包含两个要点,元素定义的环境初始化

在 CSS 中,元素定义的环境有两种,一种是块格式化上下文( Block formatting context ),另一种是行内格式化上下文( Inline formatting context )。 这两种上下文定义了在 CSS 中元素所处的环境,格式化则表明了在这个环境中,元素处于此环境中应当被初始化,即元素在此环境中应当如何布局等。

以上解释专业点的说法是:在常规流中的框,都属于一个格式化的上下文中。

这个上下文可能是块的,也可能是行内的,但不可能同时是行内的又是块的。

接下来我们就来介绍这三种定位体系和格式化上下文(formatting context)

常规流( Normal flow )

之称之为常规流,是因为这是相对于后面的浮动和绝对定位的一个概念,浮动和绝对定位元素都脱离了当前的常规流。

在 CSS2.1中,常规流包括块框( block boxes )的块格式化( block formatting ), 行内框( inline boxes )的行内格式化( inline formatting ),块框或行内框的相对定位,以及插入框的定位。

在 CSS 中,元素定义的环境有两种,一种是块格式化上下文( Block formatting context ),另一种是行内格式化上下文( Inline formatting context )。 这两种上下文定义了在 CSS 中元素所处的环境,格式化则表明了在这个环境中,元素处于此环境中应当被初始化,即在常规流中的框,都属于一个格式化的上下文中等。

块格式化上下文( block formatting contexts)

Block Formatting Contexts(块格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。

在创建了 Block Formatting Contexts 的元素中,其子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部,两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性。在 Block Formatting Contexts 中相邻的块级元素的垂直外边距会折叠(collapse)。

在 Block Formatting Contexts 中,每一个元素左外边与包含块的左边相接触(对于从右到左的格式化,右外边接触右边), 即使存在浮动也是如此(尽管一个元素的内容区域会由于浮动而压缩),除非这个元素也创建了一个新的 Block Formatting Contexts 。

这是W3C关于BFC的一个解释,通俗一点解释就是:在常规流( Normal flow )

块格式化上下文( block formatting contexts)触发方式,在创建了块格式化上下文的元素中的子元素都会按照块格式化上下文提供的规矩来排列自己,除非自己也创建一个新的块格式化上下文

触发方式

  • float:left|right ,除了none
  • overflow:hidden|auto|scroll(也就是除了overflow:visible;)
  • position: absolute|fixed (IE6没有块状格式化上下文的概念,不过有类似的layout的,所以不用担心IE6不支持fixed而不能创建块状格式化上下文)
  • display:inline-block|table-cell|table
  • 表格的单元格(display: table-cells,TD、TH)
  • 表格的标题(display: table-captions,CAPTION)
  • 表格元素创建的 “匿名框” 。

注意,是这些元素创建了块格式化上下文,它们本身不是块格式化上下文。

Block Formatting Context有什么用

产生了Block Formatting Context的盒模型会有三个性质,这三个性质我们可能都有一些了解,但对于内部原理不是很明白。努力弄懂这一核心原理的话,能帮助我们更好的掌握一些IE6/7的hasLayout bug。

比如我们知道浮动元素可以包含另一个浮动元素,让儿子浮动元素不会跟外部元素有相互的影响。其根本原理因为浮动的父元素生成了Block Formatting Context。

  1. Block Formatting Context会阻止边距折叠

    代码

    <div style="width:400px;background-color:#0000ff;">
        <div style="background:gray;margin:20px;">没创建BLK不同流div</div>
    </div>
    <div style="width:400px;background-color:#8a2be2;overflow:hidden;_zoom:1">
        <div style="background:gray;margin:20px;">创建BLK,IE通过类似BLK的layout,IE通过zoom:1触发layout</div>
    </div>
    

    DEMO

    没创建BLK不同流div
    创建BLK,IE通过类似BLK的layout,IE通过zoom:1触发layout
    Block Formatting Context会阻止边距折叠实例以及DEMO
  2. Block Formatting Context可以包含内部元素的浮动

    代码

    <div style="width:400px;">
        <div>没创建BLK不同流div</div>
    </div>
    <div style="width:400px;background-color:#0000ff;overflow:hidden;_zoom:1">
        <div>创建BLK,IE通过类似BLK的layout,IE通过zoom:1触发layout</div>
    </div>
    

    DEMO

    没创建BLK不同流div
    创建BLK,IE通过类似BLK的layout,IE通过zoom:1触发layout
    Block Formatting Context可以包含内部元素的浮动实例以及代码

    div同样都是设置了背景色为蓝色,但前一个div就没有显示出来,因为内部的浮动元素脱离了文档流,不受父元素的控制,那么父元素在文档流中是一个空标签,没有高度和宽度,也就不显示任何颜色;而第二个div由于生成了Block Formatting Context(通过overflow:hidden;触发),会包容住里面的浮动元素,这样容器才会有自己的宽度和高度(被子元素撑开),这样就会显示出颜色;当然也可以通过其他触发Formatting Context,譬如通过float:left;触发。

  3. Block Formatting Context可以阻止元素覆盖浮动盒模型

    这是非常给力的一个特性。规范说:Block Formatting Context的盒模型border外延(而不是margin外延,也就是说无视margin设置)不会覆盖周围的浮动盒模型margin外延。这就是说浏览器应该默默创建一个特定边距来阻止Block Formatting Context的盒模型border外延覆盖周围的浮动盒模型。出于此种原因,接在浮动元素后面的Block Formatting Context上设置的负边距应该是无效的(应该被浏览器默默创建的特定边距覆盖),不过对此-webkit浏览器和IE6会有不正确的理解,试试用不同的浏览器看看这个页面,webkit和IE6理解是不正确的,其余是正确的。

    代码

    <div style="background:skyBlue;float:left;width:180px;">
        leftside
    </div>
    <div style="background:yellow;float:right;width:180px;">
        rightside
    </div>
    <div style="background:pink;overflow:hidden;_zoom:1;_margin:0 -3px 0 0;border:5px solid teal;">
        middele
    </div>
    

    DEMo

    leftside
    rightside
    middele
    Block Formatting Context可以阻止元素覆盖浮动盒模型代码以及DEMO

    外延上,那么如果希望上面的Block Formatting Context(也就是有border的那个盒子)左右两边出现边距,那么只有两种方法:

    • 给Block Formatting Context设置一个超过两边浮动盒模型宽度的margin值,比如margin:0 220px;
    • 在浮动元素上设置20px margin

    ps.前一种方法在Chrome和IE6下跟别的浏览器表现不一。后一种方法在IE6/7下会出现双边距bug。

    ps.border外延跟一个盒模型有没有设置border属性完全没有关系,只是从盒模型上无视margin而已。

    ps.在IE6下当中会出现3像素bug

行内格式化( inline formatting )

相对于块格式化上下文,在行内格式化上下文中,框( boxes )一个接一个地水平排列,起点是包含块的顶部。 水平方向上的 margin,border 和 padding 在框之间得到保留。 框在垂直方向上可以以不同的方式对齐:它们的顶部或底部对齐,或根据其中文字的基线对齐。 包含那些框的长方形区域,会形成一行,叫做行框。

实例代码

<p style="background-color:silver; font-size:30px;">
    TEXT1
<span style="border:3px solid blue;">text in span</span>
    great1
<em style="border:3px solid red;">thx a lot</em>
bee<strong style="border:3px solid green;">
    give me 5!
</strong>
    Aloha!
</p>

DEMO

TEXT1text in spangreat1thx a lotbeegive me 5!Aloha!

行框的宽度由它的子孙集和其中的浮动元素决定。高度的确定由行高度计算规则决定。

行框的范围

通常,行框的左边接触到其包含块的左边,右边接触到其包含块的右边。然而,浮动元素可能会处于包含块1边缘和行框边缘之间。 总之,尽管在相同的行内格式化上下文中的行框通常拥有相同的宽度(包含块的宽度),它们可能会因浮动元素缩短了可用宽度, 而在宽度上发生变化。同一行内格式化上下文中的行框通常高度不一样(如,一行包含了一个高的图形,而其它行只包含文本)。

实例代码

<p style="background-color:silver; width:500px; overflow:hidden; ">
<span style="border:1px solid blue; font-size:50px; float:left;">FLOAT</span>
<em style="border:1px solid yellow; font-size:30px;">great1</em>
<span style="border:1px solid yellow;">good</span>
</p>

DEMO

FLOAT
great1
good


行内框可能被分割

如果几个行内框在水平方向无法放入一个行框内,它们可以分配在两个或多个垂直堆叠的行框中。因此,一个段落就是行框在垂直方向上的堆叠。 行框在堆叠时没有垂直方向上的分割且永不重叠。

如果一个行内框超出包含它的行框的宽度,它会被分割成几个框,并且这些框会被分布到几个行框内。如果一个行框不能被分割(例如, 行内框只包含单个字符,或者语言特殊的断字规则不允许在行内框里换行,或者行内框受到带有 “nowrap” 或 “pre” 值的 ‘white-space’ 特性的影响),这时,行内框会溢出行框。

如果一个行内框被分割,margin、padding 和 border 在所有分割处没有视觉效果。

行内框还可能由于双向文本处理(bidirectional text processing)而在同一个行框内被分割为好几个框。

示例代码:

<p style="background-color:silver; width:100px; ">
    <span style="border:1px solid blue; font-size:50px;">text in span</span>
    <em style="border:1px solid yellow; font-size:30px; vertical-align:top;">great1</em>
</p>

DEMO

text in span
great1

由于行框宽度限制(100px),第一个 SPAN 元素形成的行内框,被分割成了 3 段。

行内框在行框中垂直方向上的对齐

行框的高度总是足够容纳所包含的所有框。不过,它可能高于它包含的最高的框(例如,框对齐会引起基线对齐)。 当一个框 B 的高度小于包含它的行框的高度时,B 在行框中垂直方向上的对齐决定于 ‘vertical-align’ 特性。 ‘vertical-align’ 默认值为基线( ‘baseline’ )对齐。

示例代码:

<p style="background-color:silver; width:500px; ">
    <span style="border:1px solid blue; font-size:50px;">text in span</span>
    <em style="border:1px solid yellow; font-size:30px; vertical-align:top;">great1</em>
</p>

DEMO

text in span
great1

行内框在行框中垂直方向上的对齐实例以及DEMO

DEMO上我们看到 em 所形成的行内框内容的顶端与行中最高元素的顶外边界对齐。

行内框在行框中水平方向上的对齐

当一行中行内框宽度的总和小于包含它们的行框的宽,它们在水平方向上的对齐,取决于 ‘text-align’ 特性。 如果其值是 ‘justify’,用户端也可以拉伸行内框(除了 ‘inline-table’ 和 ‘inline-block’ 框)中的空间和文字 。

示例代码:

<p style="background-color:silver; width:500px;overflow:hidden; text-align:center;">
    <span style="border:1px solid blue; font-size:50px; float:left;">FLOAT</span>
    <em style="border:1px solid yellow; font-size:30px;">great1</em>
    <span style="border:1px solid yellow;">good</span>
</p>

DEMO

FLOAT
great1
good

行内框在行框中水平方向上的对齐实例以及DEMO

DEMO上我们看到浮动元素缩短了当前的行框,并且行内框在对齐的时候是根据行框的宽度,居中对齐。

块框( block boxes )和行内框( inline boxes )只是三种定位体系定位之一的常规流( Normal flow ),而块级格式上下文(Block Formatting Context)和 行内格式上下文( inline formatting )其实他们元素创建的格式上下文,他们本身其实并不是上下文,是对内框的排列的一种约束。

浮动( Floats )

浮动,顾名思义,相对于常规流来讲,它漂浮在常规流的上方。

在浮动模型中,一个框( box )首先根据常规流布局,再将它从流中取出并尽可能地向左或向右偏移。内容可以沿浮动区的侧面排列。 因为它首先要根据常规布局后才偏移,所以效率较常规流低。

用 ‘float’ 特性声明浮动,特性值可以是:”none”、”left”、”right”。

还记得介绍块级格式上下文(Block Formatting Context)时说 float:left|right;会(Block Formatting Context),这里再解释一下

对某个框(box)设置float:left|right;该框(box)本身是按照浮动特性漂浮于常规流的上方,而块级格式上下文(Block Formatting Context)建立则是作用于包含块(box)内的块(box)的,两个是不同的概念。

绝对定位( Absolute positioning )

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

position:static | relative | absolute | fixed | inherit

接下来介绍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:10px; left:10px; background-color:red;">B</div>
    <div id="C" style="background-color:blue;">C</div>
</div>

DEMO

A
B
C


absolute

框的位置(可能还有它的尺寸)是由’left’,’right’,’top’和’bottom’特性决定。这些特性指定了框相对于它包含块1的偏移量。 绝对定位的框从常规流向中脱离。这意味着它们对其后的兄弟元素的定位没有影响。另外,尽管绝对定位框有外边距(margin), 它们不会和其它任何外边距发生折叠(Collapsing margins)。

absolute实例代码

<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>

absolute DEMO

A
B
C
absolute实例代码以及DEMO

fixed

框位置的计算根据 ‘absolute’ 模型,就是说’absolute’的子集。不过框要额外地根据一些参考而得到固定。跟绝对定位一样,固定定位元素的外边距不会和任何其他外边距发生折叠。 应用于手持终端、投影设备、屏幕、TTY、电视媒体类型时,框相对于可视窗口固定,网页滚动时不移动。

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

虽然fix是根据 ‘absolute’ 模型,但是绝对定位(”position: absolute”)元素的包含块由离它最近的 ‘position’ 属性为 ‘absolute’、’relative’ 或者 ‘fixed’ 的祖先元素创建。

‘display’、’position’ 和 ‘float’ 的相互关系

CSS 三种定位方式以及格式化上下文详解

‘display’、’position’ 和 ‘float’关系图
设定值 计算值
inline-table table
inline, run-in, table-row-group, table-column, table-column-group, table-header-group,
table-footer-group, table-row, table-cell, table-caption, inline-block
block
其他 同设定值
display转换表
  1. ‘display’ 的值为 ‘none’

    如果 ‘display’ 的值为 ‘none’,那么 ‘position’ 和 ‘float’ 不起作用。在这种情况下,元素不产生框。因此浮动和定位无效。

  2. ‘position’ 的值是 ‘absolute’ 或 ‘fixed’

    当元素是绝对定位时,浮动失效,’display’ 会被按规则重置。如下代码:

    <div id="test" style="position:absolute; float:left; display:inline;"></div>
    

    IE6、7中,’float’ 值和 ‘display’ 的特性值未发生变化,还是 “float: left; display: inline”。

    其他浏览器中计算后的结果是:”float: none; display: block”。

  3. ‘float’ 的值不是 “none”

    如果 ‘float’ 的值不是 “none”,该框浮动并且 ‘display’ 会被按照转换对应表设置。

    <span id="test" style="width:100px; height:100px; border:1px solid red; float:left;">float span</span>
    

    按照规则,SPAN 是行内元素,因此不能够设置其宽度和高度。但是浮动后,

    IE6、7中,’float’ 值和 ‘display’ 的特性值未发生变化,还是 “float: left; display: inline”,产生block假象只是因为触发了IE的layout。

    其他浏览器中’display’ 值按照转换对应表设置后。

  4. 元素是根元素

    如果元素是根元素,’display’ 的值按照转换对应表设置。

  5. 否则,应用指定的 ‘display’ 特性值。

这个上下文可能是块的,也可能是行内的,但不可能同时是行内的又是块的。

本文源链接:http://www.html5jscss.com/box-context.html

转载请注明《CSS 三种定位方式以及格式化上下文详解》| html5jscss

评论关闭了.