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

相关文章推荐

爱喝酒的橙子 · JPA踩坑记：Spring Data ...· 5 月前 ·

一身肌肉的打火机 · visual studio安装vc++14 ...· 1 年前 ·

难过的打火机 · Vue的学习笔记（下篇）|字符串|vue|k ...· 2 年前 ·

坐怀不乱的作业本 · jQuery实现元素的鼠标移入移出及点击显示 ...· 2 年前 ·

瘦瘦的刺猬 · 【Windows】【VS】error ...· 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有效，这是由于浏览器的渲染顺序决定的。