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有效，這是由於瀏覽器的渲染順序決定的。