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的百分比靠目测……恩。

植入部分

如果您觉得文章不错,可以通过赞助支持我。

如果您不希望打赏,也可以通过关闭广告屏蔽插件的形式帮助网站运作。

标签: 成品, 源码, 知识, 代码段, 语法

添加新评论