详述padding和margin中的负值（内有详细示例 ）
padding中的负值
padding不支持负值！！！（仔细想一想，内边距确实没必要设置负值）
如下图，如果给padding设置了负值，则显示该属性无效。
margin中的负值（转自：https://www.cnblogs.com/xiaohuochai/p/5314289.html#anchor1）
margin是外边距，代表这个盒子模型跟其它盒子模型的距离，当margin为正值时，这个盒子会与其它盒子产生一定的距离，那么顾名思义，当margin为负值时，这个盒子的外边距是负值，就是往与正值相反的方向移动一定的距离。
margin负值是一个很常用的功能，很多特殊的布局都依赖于此。
一、表现（虽然margin可以应用到所有元素，但是display属性不同时，表现也不同）
- block元素可以使用四个方向上的margin值。
- inline元素使用上下方向的margin值无效。
- inline-block使用上下方向的margin负值看上去无效。（这个看上去无效是啥意思呢，就是说它无效是因为默认的vertical-align: baseline，当垂直对齐的属性值为其它值时，会显示不同的视觉效果。
如图：
二、重叠（margin负值并不总是后面元素覆盖前面元素，它与元素display属性有关系）
上面说到，如果margin为负值，就是往正值相反的方向移动一段距离，那么就可能造成元素之间的重叠。重叠的效果与display属性也有关系。
- 两个block元素重叠时，后面元素可以覆盖到前面元素的背景，但无法覆盖其内容。
- 当两个inline元素，或两个inline-block元素，或inline与inline-block元素重叠时，后面元素可以覆盖前面元素的背景和内容。
- 当inline元素（或inline-block元素）与block元素重叠时，inline的元素（或inline-block元素）覆盖block元素的背景，内容的话，后面的元素覆盖前面的元素。
如图：
三、 浮动
- block元素与浮动元素重叠时，其边框和背景在该浮动元素之下显示，而内容在浮动元素之上显示。
- inline或inline-block元素与浮动元素重叠时，其边框、背景和内容都在该浮动元素之上显示。
如图：
【总结】就覆盖来说，行内元素（包含inline-block） > float > 块级元素，可以把float当作inline（或inline-block）和block之间的元素。
【注意：前面的几种情况都是前面一个元素是block或inline、inline-block元素，后面的元素是浮动元素，当给浮动元素或者前面的元素设置margin负值的时候导致的重叠。但是如果前面的元素是浮动元素，后面的元素是正常文档流的元素会得到什么效果呢，如下图所示：】
四、定位
- 定位元素（position不为static）覆盖其他元素的背景和内容。
- 将relative属性值应用于inline元素，由于无法改变其行内元素的本质，所以其上下margin依然存在问题。
如图：
五、应用
- 水平垂直居中
- 要居中的元素宽/高已知：则设置position:absolute; top:50%; left:50%; 然后 margin-top: height/2; margin-left: width/2;。
<div class="container">
<div class="block">block</div>
</div>
.container {
border: 2px solid black;
position: relative;
height: 300px;
}
.block {
height: 100px;
width: 200px;
background-color: rgb(240, 178, 178);
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
效果：
- 要居中的元素宽/高不确定：此时margin负值不能使用具体的px了，可以使用百分比。由于margin的百分比都是相对于包含块的宽度，所以只能设置宽高相同的居中元素。如何获得包含块的宽度呢？利用absolute的包裹性，在需要居中的元素外面套一个空的 div
<div class="container">
<div class="out">
<div class="block">block</div>
</div>
</div>
.container {
border: 2px solid black;
position: relative;
height: 300px;
}
.out {
position: absolute;
top: 50%;
left: 50%;
}
.block {
height: 100px;
width: 100px;
background-color: rgb(240, 178, 178);
margin-top: -50%;
margin-left: -50%;
}
效果：
- 列表项两端对齐
啥意思呢，就是比如外层元素宽度200px，内层有三个元素，宽度为60px，想要的效果是：第一个元素和第三个元素都靠着边，中间的元素在这两个元素正中间，相当于元素两两之间有10px的间距。
实现这种布局的方式有很多，比如三个元素三个样式、前两个元素margin-right为10px，最后一个没有margin-right…但是这样不好，（引用原文作者一句话就是：为了布局而布局），第三个元素没有什么特殊的，却被设置了特殊的样式。
比较优雅的办法是：内层元素和外层元素之间包一层元素，设置margin-right=-10px，这样的话，块级元素框的水平方向总和为 210px-10px=200px，等于父元素宽度即可。
<!DOCTYPE html>
<html>
<head>
<title>盒子模型</title>
</head>
<body>
<div class="box">
<ul class="list">
<li class="in">1</li>
<li class="in">2</li>
<li class="in">3</li>
</ul>
</div>
</body>
<style>
.box {
width: 200px;
height: 100px;
background-color: antiquewhite;
}
.list {
margin-right: -10px;
height: 100px;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.in {
width: 60px;
margin-right: 10px;
height: 100px;
background-color: aquamarine;
float: left;
}
</style>
</html>
- 圣杯布局（参考博客：留个坑）
总结：有个个人小理解，你看，margin为正值的时候不会出现重叠的现象，如果因为margin占了别人的位置，就相当于挤走别人了，而不会重叠；但是margin负值就会发生重叠（没挤走别人的位置），感觉margin负值其实跟absolute或者说float挺像的，但是人家margin负值是遵循正常的文档流的，反正就是可以重叠，或者扩展点位置，用处还真不少！哎，慢慢练习熟能生巧吧！
