深入理解CSS中的margin负值
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
深⼊理解CSS中的margin负值
转⾃：
原⽂对margin负值做了特别详细的解读，应⽤案例也特别实⽤，转来为⽇后参考复习之⽤。
前⾯的话：
margin属性在实际中⾮常常⽤，也是平时踩坑较多的地⽅。
margin折叠部分相信不少⼈都因为这样那样的原因中过招。
margin负值也是很常⽤的功能，很多特殊的布局⽅法都依赖于它。
它看似简单，实际上却蛮复杂，本⽂就margin负值作详细介绍和梳理。
⼀、表现：
虽然margin可以应⽤到所有元素，但display属性不同时，表现也不同：
【1】block元素可以使⽤四个⽅向的margin值；
【2】inline元素使⽤上下⽅向的margin值⽆效；
【3】inline-block使⽤上下⽅向的margin负值看上去⽆效；
[注意]inline-block使⽤上下⽅向的margin负值只是看上去⽆效，这与其默认的vertical-align:baseline有关系，当垂直对齐的属性值为其他值时，则会显⽰不同的视觉效果。
⼆、重叠：
margin负值并不总是后⾯元素覆盖前⾯元素，它与元素display属性有关系
【1】两个block元素重叠时，后⾯元素可以覆盖前⾯元素的背景，但⽆法覆盖其内容；
【2】当两个inline元素，或两个line-block元素，或inline与inline-block元素重叠时，后⾯元素可以覆盖前⾯元素的背景和内容；
【3】当inline元素与block元素重叠时，inline的元素覆盖block元素的背景和内容；
【4】当inline-block元素与block元素重叠时，inline-block元素覆盖block元素的背景，但⽆法覆盖其内容。
三、浮动：
【1】block元素与浮动元素重叠时，其边框和背景在该浮动元素之下显⽰，⽽内容在浮动元素之上显⽰；
【2】inline或inline-block元素与浮动元素重叠时，其边框、背景和内容都在该浮动元素之上显⽰。
四、应⽤：
【1】⽔平垂直居中
由于margin的百分⽐相对于包含块的宽度，所以在需要居中的元素外⾯套⼀个空的<div>元素，并且利⽤absolute的包裹性，使该元素的宽⾼等于需要定位的元素的宽⾼
.box{
position:relative;
width: 200px;
height: 200px;
background-color: lightgreen;
border: 2px solid black;
}
.out{
position: absolute;
left: 50%;
top: 50%;
}
.in{
height: 100px;
width: 100px;
background-color: pink;
margin-left: -50%;
margin-top: -50%;
}
<div class="box">
<div class="out">
<div class="in">测试内容</div>
</div>
</div>
【2】列表项两端对齐
在列表项外⾯包⼀层元素，使⽤margin负值来将最后⼀个列表项拉回来
ul{
margin: 0;
padding: 0;
list-style:none;
}
.box{
width: 200px;
background-color: pink;
}
.list{
overflow: hidden;
margin-right: -10px;
}
.in{
float: left;
width: 60px;
height: 100px;
background-color: lightgreen;
margin-right: 10px;
}
<div class="box">
<ul class="list">
<li class="in">1</li>
<li class="in">2</li>
<li class="in">3</li>
</ul>
</div>
【3】三栏⾃适应布局
中间的主体使⽤双层标签，外层<div>宽度100%显⽰，并且浮动，内层<div>为真正的主体内容，含有左右 210px的margin值。
左栏和右栏都采⽤margin负值。
左栏左浮动，margin-left为-100%，正好使左栏位于页⾯左侧。
右栏左浮动，⼤⼩为其本⾝的宽度200px
html,body{
height: 100%;
}
body{
margin: 0;
}
.main{
width: 100%;
height: 100%;
float: left;
}
.main .in{
margin: 0 210px;
background-color: pink;
height: 100%;
}
.left,.right{
height: 100%;
width: 200px;
float: left;
background-color: lightgreen;
}
.left{
margin-left: -100%;
}
.right{
margin-left: -200px;
}
<body>
<div class="main">
<div class="in"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>
【4】三栏等⾼布局
给每栏设置⼤的底部内边距，然后⽤数值相同的负外边距消除这个⾼度，然后在外层容器中设置overflow:hidden
body{
margin: 0;
overflow: hidden;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
.list{
overflow: hidden;
width: 100%;
height: 100%;
}
.main{
margin: 0 210px;
background-color: lightgreen;
}
.left{
width: 200px;
float: left;
background-color: pink;
}
.right{
width: 200px;
float: right;
background-color: pink;
}
.main,.left,.right{
margin-bottom: -9999px;
padding-bottom: 9999px;
}
<ul class="list">
<li class="left">左侧⽂字⽐较少</li>
<li class="right">右侧⽂字⽐较多右侧⽂字⽐较多右侧⽂字⽐较多右侧⽂字⽐较多右侧⽂字⽐较多右侧⽂字⽐较多右侧⽂字⽐较多右侧⽂字⽐较多右侧⽂字⽐较多右侧⽂字⽐较多右侧⽂字⽐较多右侧⽂字⽐较多右侧⽂字⽐较多右侧⽂字⽐较多右侧<li class="main">中间⽂字⽐较少</li>
</ul>。