普通流 CSS定位机制

网页制作Webjx文章简介:由于没有找到自己认为完整的关于普通流、浮动和绝对定位的中文文章,于是鼓起勇气决定自己来写篇。为此大致啃掉了CSS2.1里的 8 Box model 以及 9 Visual formatting model 。实话说,还真是看得有点头大,呵呵~ 文档流,其实标准里根本就没有这个词。如果把文档流直译

  由于没有找到自己认为完整的关于普通流、浮动和绝对定位的中文文章,于是鼓起勇气决定自己来写篇。为此大致啃掉了CSS2.1里的 8 Box model 以及 9 Visual formatting model 。实话说,还真是看得有点头大,呵呵~

  文档流,其实标准里根本就没有这个词。如果把文档流直译为英文就是 document flow ,但标准里只有另一个词,叫做普通流( normal flow ),或者称为常规流。但似乎大家更习惯文档流的称呼,因为很多中文翻译的书就是这么来的。比如《CSS Mastery》,英文原书中至始至终都只有普通流 normal flow 这一词,从来没出现过文档流 document flow 。但是中文译本“普通流”和“文档流”却是交替出现的。

  什么是普通流?简单说就是元素按照其在 HTML 中的位置顺序决定排布的过程。并且这种过程遵循标准的描述。

  为了从不同角度说明,我采集了一些可能冗长、具体或者晦涩的其他人给出的定义:

  将窗体自上而下分成一行行,并在每行中按从左至右的顺序排放元素,即为文档流。

  Jennifer.Kyrnin@About.com: 普通流是元素在多数情况下呈现在 web 页面上的方式。所有 HTML 都在块框( block boxes,块级元素 )或者行内框( inline boxes,行内元素 )中。

  Rainbo Design: 当浏览器开始渲染 HTML 文档,它从窗口的顶端开始,经过整个文档内容的过程中,分配元素需要的空间。除非文档的尺寸被 CSS 特别的限定,否则浏览器垂直扩展文档来容纳全部的内容。每个新的块级元素渲染为新行。行内元素则按照顺序被水平渲染直到当前行遇到了边界,然后换到下一行垂直渲染。这个过程被成为普通文档流。

  可见,把流( flow )理解为流程,完全说的通。普通流即是通常情况下的元素排布和定位流程。

  但其实在CSS2.1RC里,普通流的本质是三种定位机制( Positioning schemes )之一,被定义为:

  引用:

  Normal flow. In CSS 2.1, normal flow includes block formatting of block boxes, inline formatting of inline boxes, relative positioning of block or inline boxes, and positioning of run-in boxes.

  这个过程包括了块格式化( block formatting ),行内格式化(inline formatting ),相对定位( relative positioning ),以及 run-in boxes 的定位。似乎和上面那些迥然不同,但是把这些分解开来,仍然是一致的。

  另外,9.4 Normal flow下还有一段:

  引用:

  Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block boxes participate in a block formatting context. Inline boxes participate in an inline formatting context.

  这是段描述,不是定义。在普通流中的 Box(框) 属于一种 formatting context(格式化上下文) ,类型可以是 block ,或者是 inline ,但不能同时属于这两者。并且, Block boxes(块框) 在 block formatting context(块格式化上下文) 里格式化, Inline boxes(块内框) 则在 inline formatting context(行内格式化上下文) 里格式化。

  我们知道,任何被渲染的元素都属于一个 box ,并且不是 block ,就是 inline 。即使是未被任何元素包裹的文本,根据不同的情况,也会属于匿名的 block boxes 或者 inline boxes。所以上面的描述,即是把所有的元素划分到对应的 formatting context 里。

  组合上面的定义,并且姑且先把 formatting context 看做是一种范围限定,那么具体讲,普通流就是这样的过程:

  1.在对应的 block formatting context 中,块级元素按照其在HTML中的顺序,在其容器框里从左上角开始,从上到下垂直地依次分配空间、堆砌( stack ),并独占一行,边界紧贴父容器。两相邻元素间的距离由 margin 属性决定,在同一个 block formatting context 中的垂直边界将被重叠( collapse )。并且,除非创建一个新的 block formatting context ,否则块级元素的宽度不受浮动元素的影响(这就是浮动元素能盖在块级元素上面的原因)。

  2.在对应的 inline formatting context 中,行内元素从容器的顶端开始,一个接一个地水平排布。水平填充、边框和边距对行内元素有效。但垂直的填充、边框和空白边不影响其高度。一个水平行中的所有 inline box 组成了名为 line box 的矩形区域。 line box 的高度始终容下所有的 inline box ,并只与行高有关。 line box 的宽度受到父容器和浮动元素存在的影响(这就是文本环绕浮动元素)。如果 line box 的宽度小于容器, line box 的水平排布就取决于 text-align 。如果 line box 的宽度大于容器,则截断 line box 并换行在新的 line box 中重新排布元素(截断处不应用 padding 和 margin 值)。如果 line box 无法截断,如单词过长或者指定不换行,则会溢出容器。

[1] [2] [3]  下一页

时间: 2024-09-08 01:25:26

普通流 CSS定位机制的相关文章

CSS定位机制之一:普通流

由于没有找到自己认为完整的关于普通流.浮动和绝对定位的中文文章,于是鼓起勇气决定自己来写篇.为此大致啃掉了CSS2.1里的 8 Box model 以及 9 Visual formatting model .实话说,还真是看得有点头大,呵呵~ 文档流,其实标准里根本就没有这个词.如果把文档流直译为英文就是 document flow ,但标准里只有另一个词,叫做普通流( normal flow ),或者称为常规流.但似乎大家更习惯文档流的称呼,因为很多中文翻译的书就是这么来的.比如<CSS Ma

CSS定位:几种类型的position定位的元素

文章简介:定位属性看起来好像很好理解,但它的运作与它在表面所看到的有点儿不一样.你可能会觉得的是相对定位更加类似绝对定位.当在做布局设计的时候你通常会想使用浮动并在指定的元素上应用定位来打破布局. 当人们刚接触布局的时候都比较倾向于使用定位的方式.因为定位的概念看起来好像比较容易掌握.表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里.可是定位比你刚看到的时候要稍微复杂一点.对于定位来说,有一些东西会绊倒新手,所以在它成为你的惯用技巧前你需要掌握它们. 一旦你更深入地了解了它是怎么运作

css定位页面

CSS的4大核心基石:盒子模型.标准流.浮动.定位.只有把这些核心基础掌握到烂熟于胸的程度,才能游刃有余地进行设计. colorandy读者提出这样一个关于页面布局的问题: "如果有一个footer层,我想让他固定出现在整个页面的最下方,不随着页面中的内容而变化,CSS中要怎样设?比如里面是一些版权信息.因为我整页的内容比较少,footer老跟着内容跑到上面去,很不美观." 这个问题如果在以前使用表格布局,并不困难,只要给页面的最外层表格高度设置为100%就可以了,然而,在Web标准的

详细讲解CSS定位与定位应用

css 定位一直是WEB标准应用中的难点,如果理不清楚定位那么可能应实现的效果实现不了,实现了的效果可能会走样.如果理清了定位的原理,那定位会让网页实现的更加完美. 定位的定义: 在CSS中关于定位的内容是:position:relative | absolute | static | fixed static 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级.relative 不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通

详解CSS定位的应用及注意事项

在讲解CSS定位前,首先要搞清楚以下几个属性的真正含义和区别,如下: [ position:relative | absolute | static | fixed ] A:相对定位(position: relative):如果对某一个元素进行相对定位,它将出现在它所在的位置上.然后,可以通过设置垂直(或水平)位置(top,right,bottom,left四值),让这个元素"相对于"它的起点进行移动.注:设置为相对定位的元素框会偏移某个距离.元素仍然保持其未定位前的形状,它原本所占的

CSS定位组件CSS 定位方式

css 在HTML中并无法直接定义要显示的文字或图文件在画面的那个位置...  只能一顺序来显示...  但是CSS提供3个新的性质运用..  top,left,position...  left相当于x轴,top相当于y轴,position则是绝对(abslute)或者相对(relative)位置..  举个例子:  <html>  <head>  <meta content="text/html; charset=big5" http-equiv=Co

CSS定位一:动态转换

css|动态|转换 通过在CSS中设置属性,我们可以准确的定义一个页面的样式,如颜色.字体.边框等.现在我们要讲的CSS定位主要是在页面的布局和控制上进行定义,使您的页面从这两个方面都展现的非常完美,更加富有动感. 另外,在讲解之前,我们首先介绍两个定义:相对定位和绝对定位.相对定位就是允许在文档的原始位置上进行偏移.而绝对定位则允许任意定位. 实现CSS的定位最终还是要靠属性.我们来看一下定位属性的详细列表(见下图): 我们在下面举一个例子,其中带了一点Script的内容,我们来看看它是如何实

CSS定位二:空间定位

css 在这一节里,我们来看一个利用z-index定位的例子,这个例子的效果在这里. 我们看到例子中的两幅图片和一段文字分别处于不同的空间位置,文字覆盖在那朵花的图片上,而挥动小旗的小老鼠却又覆盖在文字的上面.那么这种效果是怎样实现的呢?这里利用了CSS定位的z-index属性,代码如下: <html> <head> <title>zindex</title> <style type="text/css"> <!-- .

Dreamweaver教程-CSS定位(positon)教程

 DIV+CSS网页布局中必不可少的就是定位,这一节的知识要和CSS盒子模型知识点结果起来理解. 1.相对定位(relative) 相对定位是指相对它本来应该处的位置所做的移动. -- <style type="text/css"> .dingwei{ position:relative; left:50px; } </style> -- <p>我是一段正常的文本</p> <p class="dingwei"&g