梳理完position，來到margin，每個知識點乙個乙個攻破啦~~
雖然margin可以應用到所有元素，但display屬性不同時，表現也不同
1. block元素可以使用四個方向的margin值
2. inline元素使用上下方向的margin值無效
3. inline-block使用上下方向的margin負值看上去無效
note：
inline-block使用上下方向的margin負值只是看上去無效，這與其預設的vertical-align:baseline有關係，當垂直對齊的屬性值為其他值時，則會顯示不同的視覺效果乙個沒有設定高度的塊狀元素，其高度是自動的，具體來說就是由它裡面的文件流最後的位置決定的。
左和右的負邊距對元素寬度的影響
負邊距不僅能影響元素在文件流中的位置，還能增加元素的寬度！這個作用能實現的前提是：該元素沒有設定width屬性（當然width:auto是可以的）。
#first
#second
style>
id="first">
id="second">
div>
div>
body>
注意：
margin-top為負值不會增加高度，只會產生向上位移
margin-bottom為負值不會產生位移，會減少自身的供css讀取的高度
#box
style>
id="box">
boxdiv>
src="">
script>
var x = $('#box').height()
console.log(x);
script>
body>
雖然瀏覽器將整個box都渲染出來了，但是css能讀取到的高度確是自身的一半。
body,ul,li
.container
ulli
style>
class="container">
子元素1li>
子元素2li>
子元素3li>
子元素4li>
子元素5li>
子元素6li>
子元素7li>
子元素8li>
ul>
div>
#box1
#box2
#box3
style>
id="main">
id="box1">元素1div>
id="box2">元素2div>
id="box3">元素3div>
div>
當然，因為設定了浮動，當將螢幕縮小的時候，最後乙個元素被撐到了下面。
如果現在，我們給所有元素都設定乙個margin-right負值呢？設定margin-right：-50px；
可以看到，元素發生了重疊啦。
將螢幕縮小試試看
然後因為寬度不夠，元素3掉下來了。我們給元素3設乙個margin-left:-80px；
基本原理就是這樣，他的應用呢？
那些說得很好聽的什麼聖杯布局、雙飛翼布局啊什麼的，都是利用這個原理實現的。就是某個元素雖然是寫在了後面，但可以通過負邊距讓它在瀏覽器顯示的時候是在前面的。
絕對定位的元素定義的top、right、bottom、left等值是元素自身的邊界到最近的已定位的祖先元素的距離，這個元素自身的邊界指的就是margin定義的邊界，所以，如果margin為正的時候，那它的邊界是向外擴的，如果margin為負的時候，則它的邊界是向裡收的。利用這點，就有了經典的利用絕對定位來居中的方法：
body
divstyle>
div>
body>
CSS之margin樣式屬性
相對於同級的標籤設定偏移量 doctype html utf 8 title span in style head border 1px solid red height 300px width 300px margin bottom 20px in style background color b...
CSS藝術之 負margin之美
css中負邊距 nagative margin 是布局中常常使用的乙個技巧。僅僅要運用得當時常會產生奇異的效果。勘稱css中的奇淫巧計，非常多css布局方法都依賴於負邊距，掌握它對於前端童鞋來說還是非常重要的。文件流 自己的理解是從頭到尾依照文件的順序。該在什麼位置就在什麼位置，也能夠依照上面的意思...
CSS 基本知識點梳理
通過box sizing設定 box sizing context box 標準盒子模型 寬度 內容的寬度 content border padding margin box sizing border box 怪異盒模型 寬度 內容寬度 content border padding margin ...