CSS 做个提醒页面后续 - 再谈定位与百分比

前面讲到了故事背景，然后就让副部也写一个，结果比我强，稍微解读了一下代码

演示

在此我们来研究一下，这样段的代码里都发生了些什么。

居中不多说margin: 0 auto;是惯例，换个方式写罢了。

这里并没有把图片竖直居中（垂直居中），这里并不多说。

一个div名叫img:

.img {
    position: absolute;
}

这里absolute父元素container并没有定义position，所以说他是相对于body而言的（出自：http://zh.learnlayout.com/position.html）（当然margin是自动生效的啦），和float起到相似的效果：

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
普通流中其它元素的布局就像绝对定位的元素不存在一样

本段摘自w3school

存文字的一个名为type的div，这里我们可以看到position:relative;，relative在不添加四方向的时候会和static表现相同，如果添加方位，则是相对于自身的width height来变动的，也可以参考上面的position.html。

接下来重点来了，我们可以看到两个padding都是百分比，一旦遇到百分比，就要开始想，百分比是针对谁的呢。

w3school padding-left告诉我们答案：

定义基于父元素宽度（content-width）的百分比左内边距。此值不会如预期地那样工作于所有的浏览器中。

而margin也是相对于parent。

transform相对于自身。

至于position则比较复杂，这是相对于参照物而言的。

PS:width的百分比也是相对于父元素而言的。

但是也值得吐槽，在这里，padding的百分比靠目测……恩。