使用css时，可能会出错的两个地方

本文首发于公众号：符合预期的CoyPan

写在前面

css大家都很熟悉了，这里就不多介绍了。本文主要介绍一下两个在日常的工作中 可能 会出错的地方。

margin-top 与 padding-top

这两个属性大家都很熟悉了， margin-top 表示外部的上边距， padding-top 表示内部的上边距。

取值可以是一个具体的值或者一个百分比，如：

margin-top: 10px;
margin-top: 10%;

padding-top: 20px;
margin-top: 20%;

当取值为具体的值时，没有什么好说的。当取值为百分比时，需要特别注意： 百分比不是相对于父元素的高度的，而是相对于父元素的宽度的 。

w3c标准如下：

直接看例子：

用处：可以用来在页面中显示 固定宽高比的图片 。

注意： height 、 top 的百分比取值，总是相对于父元素的 高度 。

这里提一下，w3cSchool中文站中，关于 margtin-top 的描述是错误的。地址在这里： http://www.w3school.com.cn/css/pr_margin-top.asp

position: fixed

一提到 position:fixed ，自然而然就会想到： 相对于浏览器窗口进行定位 。

但其实这是 不准确 的。如果说父元素设置了 transform ，那么设置了 position:fixed 的元素将相对于父元素定位，否则，相对于浏览器窗口进行定位。

w3c的官方标准如下：

看例子：

给 .parent 加上 transform:translateY(0) 以后，

总结

• padding-top 、 margin-top 、 padding-bottom 、 margin-bottom 取值为百分比时，是相对于 父元素的宽度 。
• position:fixed ，相对于浏览器窗口定位。例外：父代元素中，有元素设置了 transform ，则 postion:fixed 相对于设置了 transform 的父元素定位。

写在后面

本文总结了平时 css 开发中需要稍微注意一下的， 可能 会出错的两个问题。符合预期。

欢迎关注我的公众号: 符合预期的CoyPan

这里只有干货，符合你的预期