设置div的宽高之后，本以为会居中，没想到出现了这样的情况
先上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.big{
width: 400px;
height: 200px;
background: green;
/*避免外边距塌陷*/
overflow: hidden;
margin:0 auto;
}
.small{
width: 100%;
height:150px;
background: yellow;
margin: 20px;
}
</style>
<body>
<div class="big">
<div class="small"></div>
</div>
</body>
</html>
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;
}
