css--div宽度设置为100%，设置属性margin-left和margin-right时出现的问题

相关文章推荐

大力的椰子 · bat移动文件到指定文件夹 - CSDN文库· 1 年前 ·

英俊的黑框眼镜 · 速度提升2倍，超强悍CPU级骨干网络PP-L ...· 1 年前 ·

有腹肌的黄花菜 · 面试官：Redis 大 Key ...· 1 年前 ·

腹黑的脆皮肠 · python 连接linux ...· 2 年前 ·

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;      }

运行效果如下：

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;      }

运行效果如下：

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;      }

运行效果如下：

浏览器渲染是从左到右，从上到下排序的，当子元素的宽度加margin-left的值小于父元素的宽度时候，子元素在父元素内向右偏移margin-left的px值，此时margin-right默认铺满父元素的宽度

当子元素的宽度等于父元素宽度，即子元素铺满了整个父元素，此时margin-right是无效的，而margin-left有效，这是由于浏览器的渲染顺序决定的。