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

love丁酥酥

发布于 2018-08-27 15:30:14

3630

发布于 2018-08-27 15:30:14

文章被收录于专栏：coding for love

（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）

（注2：更多内容请查看我的目录。）

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

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

如果 display 值为 none ，那么 position 和 float 不生效。这种情况下，元素不生成盒。
否则，如果 position 值为 absolute 或 fixed ，盒为绝对定位absolutely positioned， float 的计算值为 none ， display 的设置如下表。盒的位置由 top 、 right 、 bottom 和 left 属性以及盒的包含块决定。
否则，如果 float 值不为 none ，盒浮动并且 display 的设置如下表。
否则，如果元素为根元素， display 设置如下表，除了其在CSS2.2中未定义 list-item 的指定值是否变为计算值 block 或 list-item 。
否则， 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'。结果是变化条似乎“浮动”到当前行的左侧。