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

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

冷静的鞭炮 · 埃航空难飞机坠海前并未解体_生活时报_光明网· 1 周前 ·

性感的绿豆 · 《神奇动物2》歧视亚裔被批？作者J·K·罗琳 ...· 10 月前 ·

火爆的企鹅 · 一文扫盲Docker - 掘金· 1 年前 ·

睡不着的橡皮擦 · Vue 项目中如何引入外部 js ...· 1 年前 ·

一身肌肉的烤土司 · 孙博和她的白日梦旅行_订制· 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;      }

运行效果如下：

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有效，这是由于浏览器的渲染顺序决定的。