margin慎用百分号

标签：

有个容器要上下左右留点空间，稍稍留点就行，于是选择了margin属性。 

随手写了：margin:5%

一跑起来， 整个界面是乱七八糟。 

仔细一查，margin的定义里写着：

<percentage>

A <percentage> relative to the width of the containing block. Negative values are allowed.

还特意把width加粗了， 唯恐别人看不到。 

所以上下左右各留一部分的较好做法是：

.inner{
  position:absolute;
  top:50%;
  left:50%;
  translate:transform(-50%,-50%);
}

解释：top和left计算50%的时候是用父容器的大小来计算。 

而translate的时候用子容器的大小来算。 

因为margin的百分号问题我特意去看了下padding的

padding也同理， 只看width，不看height。

至于border。。。border不支持百分号。

至少文档里是这么说的。

margin慎用百分号

标签：

原文地址：http://www.cnblogs.com/ArthasCui/p/4220987.html