当margin用百分号（%）时，数值是以谁为基准？

  今天做了一个demo，自己用原生的js写了一个轮播图，那么问题来了，当你用百分号表示margin-left的时候，他取得百分号的数值是以谁做为基准而取得值呢？子元素和父元素的width都是百分号表示，

比如一个很简单的额例子了，当一个div里面有一个div时，下面我就通过2个简单的demo来解释这个问题

1、如果父元素div大于里面的子元素div，图代码如下：box为父元素 ，bos为子

结果如下

可见结果百分号（ % ）的值是以它的父元素的宽为基准；

2.如果外面的父元素div小与里面的div box为父元素 ，bos为子

先看结果

大家思考一下，为什么我要把margin-left的值设为-60%？

其实这是有原因的，子元素占了父元素的160%；就说明子元素在他父亲的基础上还比他父亲大60%；那么，如果margin-left的取值是以父亲宽为基准，那么上面的结果应该是右边对齐了。结果正是如此，看来我们的结论是正确的，

这句话也可以这么理解：子元素以父亲为基准比他大60%，那么他再以他父亲为基准向左移动60%，那么他们的右边是不是就对齐了

特别注意：margin-top如果用百分号表示，他也是以父元素的宽为基准的，有兴趣的同学可以亲自测试一下。