2018-12-15width100%,margin-right失效

设置div的宽高之后，本以为会居中，没想到出现了这样的情况
先上代码：

image.png

image.png

为什么会这样呢？？原因如下：

首先，浏览器渲染是从左到右渲染的，这样margin-left是可以有的，
而margin-right就不一定了，因为只要子元素没有100%铺满，右边剩下的部分margin-right就会自动铺满，此时设置margin-right是无效的。

第二，你所说的右边留有空白就是margin-right自动填满的部分，如果
子元素width设置100%的话，此时如果设置margin-right是无效的，因为浏览器渲染的顺序导致的，此时如果你设置margin,其实你是可以查看出来margin-right是有的，就是你用浏览器查看父元素
的margin-left,margin-top,margin-bottom,都能显示出来，
但是你仔细看右上角有个空白，那个宽度正好和你设置的margin设置
的值是一样的，其实那就是没有显示出来的margin-right的，因为
被100%的子元素给覆盖了。

设置宽度width:auto;即可出现希望的情况。

.small{
    width:auto;
    height:150px;
    background: yellow;
    margin: 20px;
}