Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

[翻译] W3C-CSS-2.1-9.4 常规流

翻译:次碳酸钴
鼠标hover可见原文,如果发现错误请@我以便修正,谢谢捧场~

常规流(9.4)

常规流中的盒子都是inline或block渲染环境(不存在两者同时具有)。 block级的盒子参与在block渲染环境中。 inline级的盒子参与在inline渲染环境中。

block渲染环境(9.4.1)

浮动元素、绝对定位元素、非block盒子的block容器(例如inline-block、table-cell、table-caption)、overflow属性不为visible(除非它的值已经传播到viewport中)的block盒子,以上这些,它们的内容会建立新的block渲染环境。

在一个block渲染环境中,盒子将从含纳块的顶部开始,被一个接一个地垂直布局。 两个相邻盒子之间的垂直距离将由margin属性来决定。 在block渲染环境中,相邻的block级盒子的垂直margin将会合并。

在一个block渲染环境中,每个盒子的左外缘将与含纳块的左边界接触(在从右到左的渲染模式下是右接触)。 除非这个盒子会建立一个新的block渲染环境(在这种情况下盒子本身会因浮动变得更窄),否则以上描述即使在float元素参与其中的情况下也适用(虽然盒子会因float而收缩)。

关于分页媒体中断页的相关信息,请查阅“断页允许(13.3.3)”章节。

inline渲染环境(9.4.2)

在一个inline渲染环境中,盒子将从含纳块的顶部开始,被一个接一个地水平布局。 水平的margin、border、padding将由这些盒子来决定。 这些盒子可能使用不同的垂直对其方式:可能是他们的顶部或底部对其,也可能是它们的文本基线对其。 包含这些盒子的矩形区渲染成一个行,称为行盒子。

行盒子的宽度是根据含纳块与浮动情况来决定的。 行盒子的高度是根据“行高计算(10.8)”的规则来决定的。

行盒子的高度永远足够容纳它包含的内容。 它甚至可能比它包含的内容中最高的盒子还要高。 一个盒子B的高度小于包含着它的行盒子的高度,B在行盒子中的垂直对其根据vertical-align属性来定义。 当若干个inline级的盒子无法放在同一个行盒子中时,它们会被分布到两个或多个垂直堆叠的行盒子中。 因此,一个段落就是若干个垂直堆叠的行盒子。 堆叠的行盒子不垂直分离(这个例外定义在别处)也不垂直重叠。

一般情况下,行盒子的左边界与它含纳块的左边界接触,右边界如是。 但是,浮动的盒子将阻碍它们的接触。 因此,虽然通常在同一个inline渲染环境下的行盒子都有相同的宽度(就是含纳块的宽度),但在有效水平空间因float的存在而减少时,它们的的宽度也会发生变化。 同一个inline渲染环境中的行盒子一般在高度上变化(比如一行中有一个很高的图片,但是其它行只有文字)。

当inline级盒子的总宽度小于容纳它们的行盒子的宽度时,它们在这行中水平分布的方式根据text-align属性来定义。 如果该属性设置了justify这个值,浏览器可以在inline盒子中展开空白区域和单词(不用于inline-table和inline-block)。 当一个inline盒子的宽度超出了整行的宽度,它将被切成若干个盒子并跨行分布。 如果一个inline盒子无法被切开(例如,如果一个inline盒子只包含一个字符,或特定语言的单词在切割规则中不允许被切开,或这个inline盒子受white-space属性值nowrap、pre的影响),那么这个inline盒子将溢出所在的行盒子。

当一个inline盒子被切开时,在切口处margin、border、padding都没有视觉效果。

inline盒子也可能因“双向文本处理(9.10)”而被切入同一行的若干个盒子中。

行盒子是作为在inline渲染环境中需要约束住inline级内容的盒子而被创建的。 满足以下条件的行盒子,作为确定它们内部元素位置的用途时必须视为零高度的盒子,作为其它用途时候必须视为不存在:不包含文本,不保护空白字符,不包含具有非零margin、padding、border的inline元素,不具有其它流内的内容(如,图片、inline-block、inline-table,等),不结束在受保护的换行上。

这里有个inline盒子结构的例子。 下面的段落(由HTML的block级元素P创建)包含一段用EM和STRONG元素装饰的匿名文本。

    <P>Several <EM>emphasized words</EM> appear
    <STRONG>in this</STRONG> sentence, dear.</P>

P元素生成一个包含5个inline盒子的block盒子,其中有3个inline盒子是匿名的。

  • 匿名: “Several”
  • EM: “emphasized words”
  • 匿名: “appear”
  • STRONG: “in this”
  • 匿名: “sentence, dear.”

在渲染这个段落时,浏览器会把这5个盒子放入行盒子中。 在这里例子中,从P元素生成的盒子,为这个行盒子建立了含纳块。 如果这个含纳块足够宽,所有的inline盒子都将被放入同一个行盒子里。

    Several emphasized words appear in this sentence, dear.

如果不是,那么inline盒子将被分离并分布在若干个行盒子上。 上面的段落可能被切成这样:

    Several emphasized words appear
    in this sentence, dear.

或者像这样:

    Several emphasized
    words appear in this
    sentence, dear.

在前面的例子中,EM盒子被切开放入两个EM盒子中(这里称它们为split1和split2)。 在split1和split2之间的切开处,margin、border、padding、text-decoration,这些属性将没有视觉效果。

考虑到下面这个例子的情况:

    <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN'>
    <HTML>
      <HEAD>
        <TITLE>Example of inline flow on several lines</TITLE>
        <STYLE type='text/css'>
          EM {
            padding: 2px;
            margin: 1em;
            border-width: medium;
            border-style: dashed;
            line-height: 2.4em;
          }
        </STYLE>
      </HEAD>
      <BODY>
        <P>Several <EM>emphasized words</EM> appear here.</P>
      </BODY>
    </HTML>

根据这个P的宽度,这个盒子会被如下分布:

  • margin被插入在“emphasized”的后面和“words”的前面。
  • padding被插入在“emphasized”的上面和“words”的下面。 虚线边框在每一个部分上都渲染出三边。
相对定位(9.4.3)

一旦盒子按照常规流或浮动来布局,它就可以从当前位置偏移。 这称为相对定位。 在这个定位方式中,移动一个盒子(B1)对另一个盒子(B2)是没有影响的。这个过程类似:在B1的移动被计算完之后,B2仍然视B1为未移动而不重新计算自己的位置。 这就意味着相对定位可能引起盒子的重叠。 然而,如果相对定位使一个overflow属性为auto或scroll的盒子溢出,那么浏览器必须创建滚动条,使用户得以访问到溢出部分的内容(在它溢出的位置),这可以响到布局。

一个相对定位的盒子保持自己在常规流中的尺寸,包括它的断行和空白字符初始保护。 在“含纳块(9.1.2)”的部分描述了当一个相对定位盒子创建一个新的含纳块时的情况。

对于相对定位的元素,left和right属性将移动盒子的水平位置,但不会改变盒子的尺寸。 left属性的正值将让盒子右移,right属性的正值将让盒子左移。 盒子不会因为left和right属性的设置而被切开或拉伸,用于计算时left的值永远等于负right的值。

如果left和right两个属性都是“auto”(初始值),那么计算时使用的值将是0。(盒子保持初始位置)

如果left的值是auto,那么计算时left的值将使用负的right值。

如果right的值是auto,那么计算时right的值将使用负的left值。

如果left和right都不是auto(位置被过度约束了),那么其中的一个属性会被忽略。 如果含纳块的direction属性值是ltr,那么left的优先级将大过right。 如果含纳块的direction属性值是rtl,那么right的优先级将大过left。

例如下面的3条规则是等价的。

    div.a8 { position: relative; direction: ltr; left: -1em; right: auto }
    div.a8 { position: relative; direction: ltr; left: auto; right: 1em }
    div.a8 { position: relative; direction: ltr; left: -1em; right: 5em }

译注:direction属性必须在相对定位元素的含纳块上设置才影响它的left与right的优先级,而不是在它建立的容器盒子上设置。

top和bottom属性将移动相对定位元素的垂直位置,但不会改变盒子的尺寸。 top属性使盒子下移,bottom属性使盒子上移。

盒子不会因为top和bottom属性的设置而被切开或拉伸,用于计算时top的值永远等于负bottom的值。 如果top和bottom两个属性都是“auto”,那么计算时候使用的值将是0。 如果其中一个属性是auto,那么计算时它将使用另一个属性的负值。 如果两个属性都不为auto,那么bottom将被无视掉(或者说bottom将边为负的top)。

注意: 在脚本环境中,相对定位盒子的动态运动会产生动画效果(也参见visibility属性)。 虽然相对定位可能被用于上标和下标,但行高的自动调整不会算入移动的位置。 更多详细信息,见“行高计算(10.8)”中的描述。

相对定位的例子提供在“常规流、浮动、绝对定位,的比较(9.8)”这个部分。

网名:
3.80.32.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^