巧克力工厂

我这个人有个毛病，很多事情都想知其然也想知其所以然。比如说，开车的人，有几个知道变速器的原理的？我想大多数人都觉得开的动就行，原理搞的那么清干吗？我觉得这种想法是对的，省时间省精力，但自己却没有办法控制自己，非得弄清楚变速箱是怎么运作的。下面就把我的学习笔记记录在 blog 上。

遵循由简入易的原理，我先从手动变速箱的原理开始说起。

上图是一个 Mercedes-Benz C-class 两门跑车的六档手动变速箱。看上去，除了看到一大堆复杂的零件，每一个都不知道有什么用，但如果把它简化一下，就容易明白了。

一辆汽车的动力系统工作原理大概就是这样：首先 engine (发动机) 把动力通过 clutch (离合器) 输入给变速箱，变速箱通过不同的档位把动力转给 drive shaft，最后 drive shaft 推动轮子的转动。当然还要为每个轮子的动力进行分配，也就是上图中的 differential，但那跟变速箱的工作原理就没什么关系了。

变速箱是个封闭的空间，我们把它拆开来研究一下。

这个图很简单，但是很明白地解释了手动变速箱的工作原理。这个图的关键是，要明白金色的轴连接的是车轮，在发动机运转时，而 collar 没有跟任何一个蓝色的齿轮咬合的情况下，金色的轴是不转的，因此车轮也不转。这个时候变速箱挂在空档上。如果 collar 跟其左右的任意一蓝色齿轮咬合，都将带动金色轴的转动也将带动车轮的转动。所以 collar 也是一个关键的部件，它往哪个蓝色的齿轮上靠，决定了汽车行驶在几档上。

我们来看一个完整点的手动变速器。

图中圆圈中的数字分别代表了 collar 与之咬合后汽车行驶的档位。不难看出，从一档到五档，齿数比依次减小。说到这里，解释一下齿数比的概念，齿数比就是主动齿轮和从动齿轮的齿数的比值。这就可以解释两个问题（我自己之前的疑问）：1. 为什么低档时，汽车的“劲”大。2. 为什么低速挂低档省油，高速挂高档省油。

第一个问题的解释如下，齿数比越大，扭矩越大，汽车越有“劲”。至于为什么齿数比越大，汽车越有“劲”，可以用数学方法证明，我就不写在这里了，感兴趣的朋友可以跟我交流。第二个问题，因为功率=力x速度，扭矩=力x力矩，那么在力矩不变的情况下（也就是在车轮大小不变的情况下），我们可以把工式里的“力”=“力矩”。低档位的时候，扭矩较大，速度较慢。反之亦然。

以上是手动变速箱的基本工作原理，还有一些譬如同步器和倒档没有记录下来，其实原理并不复杂，了解到基本的知识这些都很好掌握。

节日期间，在右上角加了个桑塔的的帽子，不知道大家有没有注意到？这个帽子的摆放还是让我花了一些工夫的，主要还是自己对 CSS 没有任何基础，知道 position 属性可以摆放对象对指定的位置，不过对其下的四个子属性 (static, absolute, relative, fixed) 理解不够。

Hoofei.com 上有个简短的解释，不过正因为有点太简短，我看了以后还是犯糊涂。放狗搜了一下，发现几篇文章比较好，苦苦研究后，终于开悟。

下面我做一个总结：

Static 属性：

1. Static 属性是每个元素的默认属性，也就是说，如果你没定义 position 的属性，那么 position 的属性就自动是 static。
2. 主要用来 override 其它三个属性。

Relative 属性：

1. 从目前的位置的偏移量。
2. 这个属性相对地移动元素，但并不把该元素拿出 page flow, 因此移动后，原占据的位置依然存在。换句话说，原位置会显示为空白。
3. Relative 属性可以控制其子容器的 Absolute 属性的显示。

Absolute 属性：

1. 用的最多的属性。
2. 不像 relative, 有 absolute 属性的元素不属于 page flow, 也就是说，相对于 relative, 它并不在页面上占据位置，可以在有效的范围内自由移动。
3. 重要：absolute 的移动范围是受限于最近的一个拥有 position 属性的母容器，但不包括 position 的属性是 static 的母容器。举个例子，如果：
   div-1 {position:relative; width:200px; height:200px}
div-2 {position:absolute; top:0; right:0}
   div-1 是 div-2 的母容器的情况下， div-2 就会出现在 div-1 内的右上角处而不是很多人认为的整个屏幕的右上角处。如果 div-1 中 position 是 fixed, div-2 出现的位置也是一样的。
4. 如果拥有 absolute 属性的元素的母容器中没有设定了 position 的，那该元素则自动属于“初始容器 (initial containing block)”，至于这个初始容器是怎么定义的，按 CSS 标准的说法是，完全取决于各个浏览器了。但一般来说，是指 Body 或是 HTML 元素。

Fixed 属性：

1. 该属性跟 absolute 的特点一样，除了…
2. 有该属性的元素会固定在指定的位置，不随着屏幕的滚动而滚动。如果你不理解 fixed 属性是怎么工作的，可以看看 voivo.de 的效果。
3. 重要：IE 不支持该属性。可以用 IE 和 Firefox 浏览 voivo.de 比较一下。

最后，使用 position 属性是还有几点要注意：

1. 如果你的 relative 属性的 width 为一个相对值（比如50%），IE 的 bug 会把宽度计算成该元素的母元素的宽度而不是该元素本身的宽度。
2. 如果你为 absolute 属性设定了一个 width，不管是相对 (e.g. 35%) 还是绝对 (e.g. 450px) 值，按照 CSS 标准，这时该元素的位置应该由最近的定义了 position 的容器决定（本文前面提到过），但 IE 和 Opera 都会错误地把该元素的位置直接交给了上一级的容器来决定。到目前为止，只有 Gecko 引擎的浏览器（比如说 Mozilla 的浏览器）才能按标准正确的解释。
3. 最好为 absolute 属性设定 margin, padding 的值，因为浏览器对 margin 和 padding 的解释各不相同，这样做可以保持网页的兼容性。

参考文章：
Relatively Absolute
Learn CSS Positioning in Ten Steps
The position declaration