margin是盒模型中乙個很重要的概念，是border之外的區域，我們通常稱作外邊距，有margin-top,margin-right,margin-bottom.moargin-left四個外邊距。注意我書寫的順序是從上開始順時針的順序。 對於這四個值，我們在設定的時候必然只能有4種情況：乙個值、兩個值、三個值、四個值。
以上第二種是核心，方便理解其他的三種方式。同理，padding也是這個順序。 上面這些必備知識，對於任何乙個自學的前端，相信都會，沒有任何新意。先上栗子
以margin的margin-left為例來演示，看官們也可以管中窺豹。
"container">
"box1">測試margin為負值的情況
複製**
刪繁就簡三秋樹，領異標新二月花。 下面是css的**
html
body
.container
.box1
複製**
html以及body樣式也加上，是因為我發現，要想把這個負值的概念理解的很透徹，經過我的多次實踐，一定要採取這種自底向上的，完全展現整個過程的變化，才能說真的理解了這個概念。 真正的原因如下
實驗的目的：改變margin-left的負值的大小，觀察他的移動方向，而container的div的margin-left:30px;的設定正是確立邊界，我通過對比margin-left的負值的大小與移動方向、移動距離來推論下面我們具體分析整個過程，以下面的圖的變化來分析。 通常科學的分析方法是找臨界值，我採用的是去問題的的對立面來找線索，要分析負值，我們先看margin是正值的情況。
第一步 margin-left: 30px的情況
如圖所示，效果很直觀。margin-left第二次賦值為30px,覆蓋了它的初始值10px。圖中綠色是html的border,橘黃色是body的outline,大div的border是紅色，內部的box1outline是藍色。
第二步 margin-left: 30px變大的情況
對比上述兩個圖，很容易的發現：margin-left變大，content的寬度變小，理解為擠扁了
第三步 margin-left: 30px變小的情況
對比二、三步的圖發現，margin-left變小，content的寬度變大，理解為外擴了，當讓了，此時還沒分析完，我們不能很確定這個結論，繼續變小，來分析。
這是乙個偉大分界線，臨界值
第四步 margin-left: 30px變小變為0了
又是一條偉大分界線，開闢了二次元
第五步 margin-left: 30px變小變為負值了
又是一條偉大分界線,與body的outline重合
第六步 margin-left: 30px變小變為-30px了
又是一條偉大分界線,都超出天際了，還能小
第七步 margin-left: 30px變小變為-60px了
至此，整個過程分析完畢，可以肯定乙個結論了：margin-left變大，content的寬度變小，理解為擠扁了，margin-left變小，content的寬度變大，理解為外擴了
以上就是我總結的結論。 很喜歡張鑫旭老師的一段話，今天就以張老師的關於css學習瓶頸的一段話，來結束這篇文章。
理解的對錯每個人的成長經歷不同，大腦擅長處理的東西也不同，導致其看待與理解事物的方式也不同。因此，對於同一css表現的差異，每個人的理解都不同。
一旦有所差異，就有所謂的「對錯」之爭。估計不少人會拿《css權威指南》上的東西說事：你那種理解是錯誤的，css權威指南上說……或w3c官方文件解釋說……
我大學電路老師最後一節課專門講了她的科學觀：何為科學？能夠自圓其說，自成體系即是科學。中醫算科學嗎？算！因其有一套自己解釋暢通的理論體系。 同樣，對於css的理解，我個人一直認為什麼對錯的爭執等都是沒有意義的。如果你的解釋可以自圓其說，自成體系，且應用無誤，哪怕你的解釋與什麼規範啊權威啊八竿子都打不著，別人壓根理解不了，你都是對的，ok的！
拘泥只會限制自身的創造力以及認知能力。火影的世界算是世界嗎？是，自圓其說，自成體系！海賊王的世界算是世界嗎？是自圓其說，自成體系。
因此，如果你是設計出身，或文學出身的。什麼複雜邏輯，深奧解釋理解不了，你大可摒棄之，用你自己的世界去解釋其表現，你的感性思維以及藝術情懷只會讓這個世界變得更精彩！那些自以為是，抱殘守缺的雜碎們就不用鳥他們，讓他們隨著時間消逝去吧~~
如何理解margin值為負
通常來說margin為正值時，我們很清楚其布局形式，即在border邊界線處再往外擴充套件指定長短。可margin為負又表示什麼呢，表示始於border邊界線處並向內擴充套件指定長短，這樣，下乙個文件流物件便是從margin邊界線處起，顯示出來。示例 1 頁面效果 此時有乙個margin邊界線我們看...
負margin的理解（一）
之前有在看大牛的部落格，然後看到負margin,會想那個負margin值是怎麼計算出來的，還有啥時候設定負margin是有效果，現在做如下總結 html 結構 div class container div class main wrap h2 main content h2 div div cla...
理解並運用 CSS 的負 margin 值
本文樣式 採用 scss。瀏覽器相容性為 ie6 你的網頁中，不可能沒有使用過 margin。大多數情況下，我們採用的都是正數的 margin 值，可能有時候會用到負的 margin 值。在我們的印象中，負的 margin 值就類似於瀏覽器的 hack 一樣，不被人接受。但是，本文要說明的就是，負的...