CSS进阶09-定位体系差异分析

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

1. display,position,float 之间的关系

这三个属性均会影响盒的生成及布局,它们的交互如下:

  1. 如果 display 值为 none ,那么 position 和 float 不生效。这种情况下,元素不生成盒。
  2. 否则,如果 position 值为 absolute 或 fixed ,盒为绝对定位absolutely positioned, float 的计算值为 none , display 的设置如下表。盒的位置由 top 、 right 、 bottom 和 left 属性以及盒的包含块决定。
  3. 否则,如果 float 值不为 none ,盒浮动并且 display 的设置如下表。
  4. 否则,如果元素为根元素, display 设置如下表,除了其在CSS2.2中未定义 list-item 的指定值是否变为计算值 block 或 list-item 。
  5. 否则, dislay 属性值使用指定值。

2. 标准流 normal flow,浮动 floats 和绝对定位 absolute positioning 的比较

为了说明标准流,相对定位,浮动和绝对定位之间的区别,我们提供了一系列基于以下HTML的示例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
    <TITLE>Comparison of positioning schemes</TITLE>
  </HEAD>
  <BODY>
    <P>Beginning of body contents.
      <SPAN id="outer"> Start of outer contents.
      <SPAN id="inner"> Inner contents.</SPAN>
      End of outer contents.</SPAN>
      End of body contents.
    </P>
  </BODY>
</HTML>

该文档中假设有如下规则:

        body {
            display: block;
            font-size: 12px;
            line-height: 200%;
            width: 400px;
            height: 400px
        }

        p {
            display: block
        }

        span {
            display: inline
        }

在每个示例中,外部和内部元素生成的框的最终位置有所不同。在每个插图中,插图左边的数字表示标准流位置中的双倍行距(为了清晰)。 注:下述图表仅供参考,并不按比例显示。它们旨在突出CSS 2.2中各种定位方案之间的差异,而不是作为给定示例的参考渲染。

2.1 标准流 normal flow

考虑以下对outer和inner的CSS声明,这些声明不会改变盒的标准流:

#outer { color: red }
#inner { color: blue }

P元素包含所有行内内容: 匿名行内文本anonymous inline text 和两个SPAN元素。因此,所有的内容将被放置在一个IFC中,处于由P元素建立的包含块内,产生类似如下内容:

2.2 相对定位 relative positioning

为了查看相对定位的效果,我们指定:

#outer { position: relative; top: -12px; color: red }
#inner { position: relative; top: 12px; color: blue }

文本正常流向outer元素。然后, outer的文本将流入其标准流内位置并在第一行末尾被分割。然后,包含文本(分布于三行)的这些行盒会整体位移“-12px”(向上移动)。 作为outer子元素inner的内容,会在标准流中紧接"of outer contents"单词(在1.5行)流入。然而,inner内容本身相对于outer内容偏移'12px'(向下),回到它们在第2行的原始位置。 请注意,跟在outer元素之后的内容不受outer相对定位的影响。

另外要注意,outer偏移量若为'-24px',outer文本会和body文本产生重叠。 现在考虑通过如下规则将inner元素的文本浮动到右边:

#outer { color: red }
#inner { float: right; width: 130px; color: blue }

inner盒脱离标准流向右浮动到right margins(盒的宽度已经显示指定),文本正常流向inner盒。inner盒左侧的行盒均被缩短,文档中剩余的文本会流入它们。

为了展示'clear'属性的效果,我们在示例中添加了一个兄弟元素:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
    <TITLE>Comparison of positioning schemes II</TITLE>
  </HEAD>
  <BODY>
    <P>Beginning of body contents.
      <SPAN id=outer> Start of outer contents.
      <SPAN id=inner> Inner contents.</SPAN>
      <SPAN id=sibling> Sibling contents.</SPAN>
      End of outer contents.</SPAN>
      End of body contents.
    </P>
  </BODY>
</HTML>

带有如下规则:

#inner { float: right; width: 130px; color: blue }
#sibling { color: red }

导致inner盒像之前一样向右浮动,并且文档中的剩余文本流入空出的空间:

但是,如果兄弟元素的clear属性设置为'right'(即,生成的兄弟盒不会接受处于 其右侧还紧邻一个浮动盒 的位置),那么兄弟内容会在float之下开始流动:

#inner { float: right; width: 130px; color: blue }
#sibling { clear: right; color: red }

2.3 绝对定位 absolute positioning

最后,我们考虑绝对定位的影响。考虑以下用于outer和 inner的CSS声明:

#outer { 
    position: absolute; 
    top: 200px; 
    left: 200px; 
    width: 200px; 
    color: red;
}
#inner { color: blue }

这会导致outer盒的top相对于其包含块containing block定位。定位盒的包含块由最近的定位祖先positioned ancestor(或者,如果不存在,使用初始包含块,正如本例中所示)。outer盒的top side在其包含块的top之下200px,left side在其包含块的left之右200px。outer的子盒相对于其父级以标准方式流动。

下面的示例显示一个绝对定位盒是一个相对定位盒的孩子。尽管父亲outer盒实际上并没有偏移,但将其“position”属性设置为“relative”表示该盒可以用作定位后代的包含块。由于outer盒是一个行内盒,被分割到多行,第一个行内盒的top edge 和 left edge(由下图中的粗虚线表示)作为“top”和“left”偏移的参考。

#outer { 
  position: relative; 
  color: red 
}
#inner { 
  position: absolute; 
  top: 200px; left: -100px; 
  height: 130px; width: 130px; 
  color: blue;
}

结果如下所示:

如果不对outer盒进行定位:

#outer { color: red }
#inner {
  position: absolute; 
  top: 200px; left: -100px; 
  height: 130px; width: 130px; 
  color: blue;
}

inner的包含块将是初始包含块initial containing block(见示例)。下图显示了此种情况下inner盒的位置。

如下例所示,可以使用相对定位和绝对定位来实现更改条。

<P style="position: relative; margin-right: 10px; left: 10px;">
I used two red hyphens to serve as a change bar. They
will "float" to the left of the line containing THIS
<SPAN style="position: absolute; top: auto; left: -1em; color: red;">--</SPAN>
word.</P>

可能会有如下结果:

首先,该段落(其包含块边在图中显示)正常流动。然后它从包含块的left margin向右偏移了'10px'(因此,为该偏移量预留了'10px'的margin)。作为变化条的两个连字符脱离标准流并位于当前行(由于'top:auto'),从其包含块(由P在其最终位置建立)的左边缘开始右移'-1em'。结果是变化条似乎“浮动”到当前行的左侧。

参考

https://www.w3.org/TR/CSS22/visuren.html#visual-model-intro https://www.w3.org/TR/CSS2/visuren.html CSS规范 > 9 视觉格式化模型 Visual Formatting Model

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏企鹅号快讯

D3.js 满足你对数据可视化的一切幻想

D3.js D3的全称是Data-Driven Documents(数据驱动的文档),是一个用来做数据可视化的JavaScript函数库,而JavaScript...

64880
来自专栏瞎说开发那些事

RPA与Excel(DataTable)

方法: 直接调用invokeCode,入参为已定义好的DataTable,出参为去重后的DataTable,代码如下

14220
来自专栏前端黑板报

canvas-入门

定义 canvas是HTML5新增的一个重要元素,先看下它的定义: <canvas> is an HTML element which can be used ...

240100
来自专栏进步博客

深入理解视觉格式化模型( VISUAL FORMATTING MODEL)

“理论不懂就实践,实践不会就学理论”,非常赞同bluedavy的这句话。实践过程中经常会遇到某个属性的使用,浏览器渲染效果与预期效果不符,虽然通过死记硬背能避免...

14030
来自专栏生信宝典

一分钟绘制磷脂双分子层:AI零基础入门和基本图形绘制

Adobe illustrator是一种应用于出版、多媒体和在线图像的工业标准矢量插画的软件,是一款非常好的图片处理工具,简称AI。

1.8K30
来自专栏服务端技术杂谈

iOS 开发从 UIView 动画说起

毋庸置疑的:在iOS开发中,制作动画效果是最让开发者享受的环节之一。一个设计严谨、精细的动画效果能给用户耳目一新的效果,吸引他们的眼光 —— 这对于app而言是...

41770
来自专栏前端新视界

给单元素艺术添加动画

原文:Animating Single Div Art 翻译:nzbin 导读:学习工具的最好的方法就是尝试新技术,本文通过“单元素艺术”介绍了 CSS 变量的...

23450
来自专栏IMWeb前端团队

重构不完全教程集之二

本文作者:IMWeb 结一原文出处:IMWeb社区未经同意,禁止转载 故不登高山,不知天之高也;不临深溪,不知地之厚也。--摘自《劝学》 ::before &...

263100
来自专栏GIS讲堂

Geoserver2.11矢量切片与OL3中的调用展示

GIS的底图一直使用金字塔技术进行切图,使用户能够快速访问指定级别的地图或者影像。但是切图本身是一张图片,无法进行交互。于是又引入了矢量图层用来显示矢量点线面,...

23330
来自专栏数据小魔方

数据地图系列10|excel(VBA)数据地图透明度填充法

今天要跟大家分享数据地图系列的第10篇——excel(VBA)数据地图透明度填充法。 这种方法的制作步骤难度与前一篇相比都较低,但是涉及到的VBA代码却要比前一...

89250

扫码关注云+社区

领取腾讯云代金券