本文详细探讨了CSS中百分比定位的原理，包括margin、padding、width等相对于父元素宽度定位，以及height、top等相对于父元素高度的定位规则。同时提到了在高度百分比定位时，若父元素无固定高度则无效，以及特殊情况如background-position的计算方式。此外，还讨论了absolute和fixed定位下的百分比计算。
----转载自自己在牛人部落中的相关文章---
在前端css定位中经常面对的一个问题是，百分比定位究竟是针对于谁定位？
一、margin，padding的百分比
首先从css的设计意图说起，在浏览器默认的 writing-mode: horizontal-tb; 和 direction: ltr; 的情况下，因为CSS的基础需求是排版，而通常我们所见的横排文字，其水平宽度一定(仔细回想一下，如果没有显式的定义宽度或者强制一行显示，都会遇到边界换行，而不是水平延展)，垂直方向可以无限延展。这也是为什么：
1. margin: auto; 无法在纵向上垂直居中，其实原因也是上面所说的，因为纵向是可以无限延展的，所以没有一个一定的值可以被参照被用来计算。
2.margin(包括margin-top,margin-bottom,margin-left,margin-right)：使用百分比时都是相对于父元素的宽度定位；
3.padding(包括padding-top,padding-left,padding-bottom,padding-right):使用百分比时也都是相对于父元素的宽度定位。
具体可参考这篇文章：
http://www.ituring.com.cn/article/64581
二、归纳如下：
相对于父元素宽度的，(如果自身已经是最外层元素，则相对于视口)
[max/min-]width、left、right、padding(包括padding-top,padding-bottom)、margin(包括margin-top,margin-bottom) 等；
相对于父元素高度
最低0.47元/天 解锁文章
扫一扫
2062
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
