布局大纲

CSS 2.1中，一个盒可能会根据三种定位方案来布局：

1. 常规流 CSS 2.1中，常规流包括块级盒的块格式化（block formatting），行内级盒的行内格式化和块级与行内级盒的相对定位
2. 浮动在浮动模型中，盒先根据常规流来放置，然后从常规流中取出来并尽可能远地向左或向右移动。其它内容可能沿着浮动（盒）的一侧排列（Content may flow along the side of a float）
3. 绝对定位 在绝对定位模型中，一个盒会从常规流中全部移除（它不会影响后面的兄弟元素）并根据包含块确定位置

如果一个元素是浮动的，绝对定位的或者是根元素，它就叫流外（out of flow）（元素）。如果一个元素不是流外的，就叫流内（in-flow）（元素）。在常规流布局中有清楚的解释。

选择定位方案： position属性

position属性决定了用哪种CSS 2.1定位算法来计算盒的位置

• position
  • Value: static | relative | absolute | fixed | inherit
  • Initial: static
  • Applies to: 所有元素
  • Inherited: no
  • Percentages: N/A
  • Media: visual
  • Computed value: 与指定值相同

属性值的含义如下：

• static（常规流）

  盒是个常规盒，根据常规流布局。top、left、right、bottom属性失效

• 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'的效果是未定义的

• absolute（绝对定位）

  盒的位置（及可能的大小）由top、left、right、bottom属性指定，这些属性指定了相对于盒的包含块的偏移量。绝对定位的盒脱离了常规流，意味着它们不会影响后面兄弟元素的布局，而且，虽然绝对定位盒有外边距，但它们不会与任何其它外边距合并。

• fixed（绝对定位）

  除了盒相对于某些参照（reference）是fixed之外，盒的位置根据absolute模型来计算。如同absolute模型一样，盒的外边距不会与任何其它外边距合并。媒体类型为handheld，projection，screen，tty和tv的情况下，该盒相对于**（视口viewport）固定，并且滚动时不会移动。媒体类型为print时，该盒在每一页都会呈现，并且相对于页盒（page box）固定，即使页面是通过一个（视口viewport）**看到的（例如，打印预览时）。

用户代理可以把根元素的position视为static

9.3.2 盒偏移：top、left、right、bottom

如果元素的position属性有一个除static外的值，就说它是定位元素（positioned）。定位的元素生成定位的盒（positioned boxes），根据以下4个属性布局：

• top

  • Value：<length> | <百分比> | auto | inherit

  • 初始值：auto

  • 适用元素：定位元素

  • 继承性：无

  • 百分比：参照包含块的高度

  • Media：visual

  • 计算值：如果指定了一个长度，就是对应的绝对长度；如果指定了一个百分比，就是指定的值；否则就是'auto'

    该属性指定了一个绝对定位的盒的上外边距边界离盒的包含块的上边界有多远。对于相对定位的盒，偏移量参照该盒自身的上边界（例如，该盒在常规流中给定了一个位置，然后根据这些属性从原位置偏移）

• right

  • Value：<length> | <百分比> | auto | inherit

  • 初始值：auto

  • 适用元素：定位元素

  • 继承性：无

  • 百分比：参照包含块的宽度

  • Media：visual

  • 计算值：如果指定了一个长度，就是对应的绝对长度；如果指定了一个百分比，就是指定的值；否则就是'auto'

    与top类似，只是指定了一个盒的右外边距边界离该盒包含块的右边界有多远。对于相对定位的盒，偏移量参照该盒自身的右边界

• bottom

  • Value：<length> | <百分比> | auto | inherit

  • 初始值：auto

  • 适用元素：定位元素

  • 继承性：无

  • 百分比：参照包含块的高度

  • Media：visual

  • 计算值：如果指定了一个长度，就是对应的绝对长度；如果指定了一个百分比，就是指定的值；否则就是'auto'

    与top类似，只是指定了一个盒的右外边距边界离该盒包含块的下边界有多远。对于相对定位的盒，偏移量参照该盒自身的下边界

• left

  • Value：<length> | <百分比> | auto | inherit
  • 初始值：auto
  • 适用元素：定位元素
  • 继承性：无
  • 百分比：参照包含块的高度
  • Media：visual
  • 计算值：如果指定了一个长度，就是对应的绝对长度；如果指定了一个百分比，就是指定的值；否则就是'auto'

  与top类似，只是指定了一个盒的左外边距边界离该盒包含块的左边界有多远。对于相对定位的盒，偏移量参照该盒自身的左边界

这4个属性的值含义如下：

• <length> 偏移量是到参照边的固定距离。允许负值

• <percentage> 偏移量是包含块宽度（对于left 或者 right）或高度（对于top 或者 bottom）的百分比。允许负值

• auto 对于非替换元素，该值的效果取决于那些相关的值也是'auto'的属性。非替换元素的详细情况，见绝对定位的width和height章节。对于替换元素，该值的影响只取决于替换内容的固有尺寸。替换元素的详细情况，见绝对定位的width和height章节。

'display'，'position'与'float'之间的关系

这3个属性影响盒的生成及布局—'display'，'position'和'float' —间的相互影响如下：

1. 如果'display'值为'none'，那么'position'和'float'不会生效。此时，元素不生成盒
2. 否则，如果'position'值为'absolute'或者'fixed'，盒就是绝对定位的。'float'的计算值置为'none'。并且display根据下表来设置。盒的位置将由'top'，'right'，'bottom'和'left'属性以及盒的包含块决定
3. 否则，如果'float'值不为'none'，那么盒是浮动的，'display'根据下表来设置
4. 否则，如果该元素是根元素，'display'根据下表来设置，但指定值'list-item'应该变成计算值'block'还是'list-item'，在CSS 2.1中是未定义的
5. 否则，其它'display'属性值（计算值）就用指定值

下一章：Css盒模型

原文发布时间为：2018年02月10日
原文作者：雕刻零碎 

本文来源：开源中国 如需转载请联系原作者