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

link管理

链接快照平台

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

相关文章推荐

打酱油的荒野 · 穿越到斗罗大陆调教 - 百度· 7 月前 ·

稳重的铁链 · 电脑能够连接苹果手机的热点吗？-百度经验· 8 月前 ·

叛逆的青蛙 · 《马拉萨尼亚32号鬼宅》电影免费观看完整版 ...· 1 年前 ·

叛逆的眼镜 · Auto-GPT 和 ...· 1 年前 ·

帅呆的柳树 · 利用PostgreSQL中的NoSQL功能 ...· 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有效，这是由于浏览器的渲染顺序决定的。