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負值是遵循正常的文檔流的，反正就是可以重疊，或者擴展點位置，用處還真不少！哎，慢慢練習熟能生巧吧！