前端面试题CSS-div宽度设置为100%，设置属性margin-left和margin-right时出现的问题

前端面试题CSS-div宽度设置为100%，设置属性margin-left和margin-right时出现的问题

div格式如下

<div class="a"> <div class="b"></div> </div>

1. css样式,子元素宽度等于父元素的宽，margin-left有效，margin-right无效
   
   .a{ width: 200px; height: 200px; background-color: chartreuse; margin: 100px auto; } .b{ width: 100%; height: 100%; margin-left: 20px; margin-right: 20px; border:2px solid brown; }
   
   运行效果如下：
   
   2.css样式，子元素宽度等于父元素宽度，margin-right无效
   
   .a{ width: 200px; height: 200px; background-color: chartreuse; margin: 100px auto; } .b{ width: 100%; height: 100%; margin-right: 20px; border:2px solid brown; }
   
   运行效果如下：
   
   3.css样式 ，子元素等于父元素的宽度，margin-left有效
   
   .a{ width: 200px; height: 200px; background-color: chartreuse; margin: 100px auto; } .b{ width: 100%; height: 100%; margin-left: 20px; border:2px solid brown; }
   
   运行效果如下：
   
   4.css样式，子元素的宽度加margin-left小于父元素的宽度，margin-left有效
   
   .a{ width: 200px; height: 200px; background-color: chartreuse; margin: 100px auto; } .b{ width: 50%; height: 100%; margin-left: 20px; border:2px solid brown; }
   
   运行效果如下：
2. css样式，子元素宽度加margin-right小于父元素宽度，此时margin-right无效
   
   .a{ width: 200px; height: 200px; background-color: chartreuse; margin: 100px auto; } .b{ width: 50%; height: 100%; margin-right: 20px; border:2px solid brown; }
   
   运行效果如下：
3. css样式 float:right使得margin-right有效
   
   .a{ width: 200px; height: 200px; background-color: chartreuse; margin: 100px auto; } .b{ width: 100%; height: 100%; float: right; margin-right:20px; border:2px solid brown; }
   
   运行效果如下：

总结

1. 浏览器渲染是从左到右，从上到下排序的，当子元素的宽度加margin-left的值小于父元素的宽度时候，子元素在父元素内向右偏移margin-left的px值，此时margin-right默认铺满父元素的宽度
2. 当子元素的宽度等于父元素宽度，即子元素铺满了整个父元素，此时margin-right是无效的，而margin-left有效，这是由于浏览器的渲染顺序决定的。
3. 新手前端小白，请大佬指教。