今天做了一个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如果用百分号表示,他也是以父元素的宽为基准的,有兴趣的同学可以亲自测试一下。