9.3 定位方案(done) - acelan86/css GitHub Wiki

在CSS2.1中,盒可以按照三种定位方案进行布局:

In CSS 2.1, a box may be laid out according to three positioning schemes:

  1. 正常流。在CSS2.1中,正常流包含块级盒的块格式(block-formatting),行内盒的行内格式(inline-foramtting),以及块级和行内级盒的相对定位(relative positioning)。
  2. 浮动。在浮动模型中,盒首先根据正常流向布局,然后脱离流尽可能的往左或往右排布。内容可以沿着浮动的边缘流动(排布)。
  3. 绝对定位。在绝对定位模型中,盒子彻底从正常流中被移除(它不再对后面的兄弟节点产生影响)并且被赋予一个与它的包含块相关的位置。
  1. Normal flow. In CSS 2.1, normal flow includes block formatting of block-level boxes, inline formatting of inline-level boxes, and relative positioning of block-level and inline-level boxes.
  1. Floats. In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.
  2. Absolute positioning. In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.

如果一个元素被浮动,绝对定位或者它是一个根元素,那么它被称为流外元素(out-of-flow)。如果一个元素不是流外元素,那么它被成为流内元素。A的流是指A的组成元素和所有那些最接近流外元素,祖先是A的流内元素。--by acelan元素 A 的流是一个集合,包含 A 元素本身,以及(1)元素 A 的流内的子元素且(2)这些子元素最近的流外祖先是 A 元素。--by 一丝

译注:这里需要注意的是,元素的流是一个集合,必须同时满足上面两个条件,缺一不可。--by 一丝, 一丝大大的这个翻译清楚了很多,而且更正了之前我的错误理解,还提供了一个例子,见http://jsbin.com/opahes/1

译注:最后一句话不知道the set的范围是指哪些,而且意思不太明白,有人清楚咩?--by acelan

An element is called out of flow if it is floated, absolutely positioned, or is the root element. An element is called in-flow if it is not out-of-flow. The flow of an element A is the set consisting of A and all in-flow elements whose nearest out-of-flow ancestor is A.

*注意:CSS2.1的定位方案让作者通过避免那些为了实现布局效果的深度陷阱(例如: 不可见的图片),从而使他们的文档更容易理解。

Note. CSS 2.1's positioning schemes help authors make their documents more accessible by allowing them to avoid mark-up tricks (e.g., invisible images) used for layout effects.

9.3.1 选择一种定位方案:“position”属性

这个能自己看么,现在不想翻,原谅我 T_T~~

9.3.2 盒偏移:“top”,“right”,“bottom”,“left”

这个同上

⚠️ **GitHub.com Fallback** ⚠️