css定位的百分比的算法,css定位中的百分比

----转载自自己在牛人部落中的相关文章---

在前端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) 等；

相对于父元素高度