专栏首页练小习的专栏可视化格式模型-定位系统

可视化格式模型-定位系统

CSS2.1中,一个框(box,就是元素形成的方块等)可以根据三种定位体系布局。

常规流(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”特性:

static 该框(box)是一个常规框,布局根据常规流(见上述说明)。’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’特性决定。这些特性指定了框相对于它包含块(绝对元素包含块的判断包含块)的偏移量。绝对定位的框从常规流向中脱离。这意味着它们对其后的兄弟元素的定位没有影响。另外,尽管绝对定位框有外边距(margin),它们不会和其它任何 margin 发生折叠(Collapsing margins)

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

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

框偏移: ‘top’,’right’,’bottom’,’left’

如果一个元素的’position’特性值不是’static’,该元素被称为定位元素。定位的元素生成定位框,其定位基于四个特性:’top’,’right’,’bottom’,’left’。

值:这四个特性的值可以是: | | auto | inherit 之一

偏移量是距离参照边的固定值。

偏移量是包含块宽度(对于’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相对于右边界。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 可视化格式模型-绝对定位

    相对包含块偏移定位 在绝对定位模型中,一个框明确地基于它的包含块偏移。不是父元素,这点需注意。 要是人家问你,绝对定位相对于谁定位啊?你很快乐的说:它的父元...

    练小习
  • 浏览器工作原理分析与首屏加载

    前言 谈到浏览器原理的分析,在网上影响最大的一篇文章莫过于以色列开发人员塔利·加希尔的研究成果。文中详细的描述了Webkit和Gecko两个浏览器引擎的工作原理...

    练小习
  • WP-pagenavi插件在分类内分页无效问题

    一直用WP-pagenavi这个插件分页,今天突然遇到个大问题,我在首页调用一个分类 <?php query_posts('showposts=2&cat=5'...

    练小习
  • [PHP] 从 PHP 5.3.X 迁移到 PHP 5.6.X不兼容点

    3.Salsa10 和 Salsa20 哈希算法 被移除。使用各种哈希算法直接或增量处理任意长度的信息。

    陶士涵
  • pandas几个小函数

    DC童生
  • CSS——变形

    变形(Transform-)属性是一些对HTML元素进行线性仿射变形相关的CSS属性。

    Html5知典
  • Boostnote 笔记搭配 WordPress 博客系统发布博客

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    suveng
  • 安装telnet与xinetd

    版权声明: 此文为本站源创文章[或由本站编辑从网络整理改编], 转载请备注出处:[ 狂码一生] http://www.sindsun.com/...

    Sindsun
  • 机器学习中数据清洗&预处理

    数据预处理是建立机器学习模型的第一步,对最终结果有决定性的作用:如果你的数据集没有完成数据清洗和预处理,那么你的模型很可能也不会有效

    范中豪
  • 【算法】朴素贝叶斯法

    朴素贝叶斯是一种简单但是非常强大的线性分类器,它在垃圾邮件分类,疾病诊断中都取得了很大的成功。

    陆勤_数据人网

扫码关注云+社区

领取腾讯云代金券