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) 等;

相对于父元素高度

你可能感兴趣的:(css定位的百分比的算法)