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

相关文章推荐

强健的苹果 · Guava ...· 2 年前 ·

高大的地瓜 · python中常⽤的excel模块库_51C ...· 2 年前 ·

阳刚的牛排 · js中动态获取页面的高度和宽度的方法总结_j ...· 2 年前 ·

痴情的机器猫 · 蓝牙打印机CPCL编程手册~汉印HM-A30 ...· 2 年前 ·

行走的眼镜 · conda安装软件报兼容性问题的解决 ...· 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有效，这是由于浏览器的渲染顺序决定的。