首页 > 其他 > 详细

定位体系(定位机制)

时间:2018-07-16 21:31:37      阅读:290      评论:0      收藏:0      [点我收藏+]

原文

  简书原文:https://www.jianshu.com/p/65bfdbe42fb1

大纲

  1、定位体系的意义
  2、定位体系的分类
  3、常规流:( Normal flow )
  4、浮动(Floats)
  5、绝对定位(Absolute positioning)
  6、选择定位方案

1、定位体系的意义

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

2、定位体系的分类

  元素在布局时,根据3种定位体系定位。分别是,常规流、浮动和绝对定位。

3、常规流:( Normal flow )

  常规流,是对 normal flow的直译。
  流者,动也。偏旁是三点水,说明,跟水有关系,水的流动是连续不间断的,也是有先后顺序的。在这里,我们把它当作可以流动的(位置可变),有先后顺序(元素顺序加载)的体系。在文档加载的时候,好像流水似的,一点点的漫过整个画布。还有一种说法是,浏览器在解析HTML CSS JS 的时候的一个流式的过程,从html起始标签开始 到html结束标签截止。

  之所以是常规,是因为,这是相对于后面的浮动和定位的一个概念,浮动和定位元素都脱离了当前的常规流。
  在 CSS2.1中,常规流包括块框(block boxes)的块格式化(blok formatting 后续会讲到),行内框(inline boxes)的行内格式化(inline formatting 后续会讲到),块框或行内框的相对定位,以及插入框的定位。

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

4、浮动(Floats)

  浮动,顾名思义,相对于常规流来讲,它漂浮在常规流的上方。因为它不再处于文档流中,所以它不占据空间。
  在浮动模型中,一个框(box)首先根据常规流布局,再将它从流中取出并尽可能地向左或向右偏移。内容可以沿浮动区的侧面排列。因为它首先要根据常规布局后才偏移,所以效率较常规流低。
  用 ‘float’ 特性声明浮动,特性值可以是:”none”、”left”、”right”。

5、绝对定位(Absolute positioning)

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

6、选择定位方案

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

6.1、static

  该框(box)是一个常规框,布局根据常规流。‘left‘ 、’right’、’bottom’和 ‘top‘属性不适用。
  如果 ‘position’没有设置,默认值也是’static’。这时,设置‘left‘ 、’right’、’bottom’和 ‘top’,无效。

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

技术分享图片

6.3、absolute

   元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。

   框的位置(可能还有它的尺寸)是由’left’,’right’,’top’和’bottom’特性决定。这些特性指定了框相对于它包含块的偏移量。 绝对定位(”position: absolute”)元素的包含块由离它最近的 ‘position’ 属性为 ‘absolute’、’relative’ 或者 ‘fixed’ 的祖先元素创建。绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。根据用户的代理不同,最初的包含快可能是画布或HTML元素。

   绝对定位的框从常规流向中脱离。这意味着它们对其后的兄弟元素的定位没有影响。另外,尽管绝对定位框有外边距(margin), 它们不会和其它任何外边距发生折叠(Collapsing margins)。
  因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

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

技术分享图片

6.4、fixed

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

 参考网址

http://www.html5jscss.com/box-context.html
http://bbs.csdn.net/topics/340223607
http://blog.csdn.net/syf19720428/article/details/51993072

 

定位体系(定位机制)

原文:https://www.cnblogs.com/shcrk/p/9320525.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!