记一次: 负margin-right失效的踩坑
2019-07-14 本文已影响0人
临安linan
以下测试均在: http://js.jirengu.com/完成
前置知识：我们都知道使用负margin可以使元素拉伸，增加宽度，如下：
// HTML
<body>
<div id=test>我是子元素的内容</div>
</body>
// CSS
body {
height: 100vh;
margin: 20px;
border: 1px solid red;
}
#test {
height: 100px;
border: 1px solid green;
box-sizing: border-box;
}
没有加负margin时，是这样的
image.png
加上一句
margin-left: -10px;
image.png
元素向左偏移10像素，并且增加偏移量为自身宽度。
设置
margin: 0 -10px，如是
image.png
但是，当设置了
width之后margin-right就会失效，但margin-left仍会产生偏移，宽度不变。
这是因为: width被固定死了，原本margin通过增加宽度产生偏移的作用就失效了。
这里设置
width: 700px，如图: 左偏移还在，右偏移失效，宽度不再发生变化
