<div>宽度设置为100%,设置属性margin-left和margin-right时出现问题。

在一个父容器内包含三个子容器，设置效果为左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化。

     <div id="A3">
        <div id="DIV-A2"></div>
        <div id="DIV-C2"></div>
        <div id="DIV-B2"></div>
    </div>

 #A3{
    margin-top:10px;
}

#DIV-A2{
    width:50px;
    background-color:red;   
    height:30px;
    float:left;/*设置浮也已经脱离文档流*/
}

#DIV-C2{
    width:50px;
    background-color:red;   
    height:30px;
    float:right;/*设置浮也已经脱离文档流*/
}

#DIV-B2{
    background-color:blue;
    width:100%;/*设置百分比可实现宽度随浏览器窗口变化而变化*/
    height:30px;
}

设置margin-left后变成这个样子，本想着把margin-right设置出来应该就会恢复原样。

但发现这时候的margin-right的值无论多大都没有作用。

注释掉left单独设置right，中间区域恢复原样，但是margin-right的值任然不起作用。
单独写了个demo发现在宽度设置为百分比的时候margin-right的值不会起作用，

 <div id="A4"></div>

#A4{
    margin-top:10px;
    background-color:blue;
    width:100%;/*设置百分比可实现宽度随浏览器窗口变化而变化*/
    height:30px;
    margin-right:200px;
}

由上图可见右边距没有发生任何变化，此时margin-right的值已经到200px了。这是为何？

你的子元素已经100%宽了，和父元素一样宽，还怎么调margin-left、margin-right

https://zhidao.baidu.com/question/397672817.html

首先，浏览器渲染是从左到右渲染的，这样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%的子元素给覆盖了。

首先，浏览器渲染是从左到右渲染的，这样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%的子元素给覆盖了。