之前有在看大牛的部落格，然後看到負margin,會想那個負margin值是怎麼計算出來的，還有啥時候設定負margin是有效果，現在做如下總結
html 結構
<div
class
="container"
>
<
div
class
="main-wrap"
>
<
h2>main content
h2>
div>
<
div
class
="aside sidebar"
>
<
h2>sidebar content
h2>
div>
div>
main-wrap ， aside 為盒子模型 上下排列1、盒子上下排列，上面盒子沒有設定float屬性，下面盒子設定float屬性
.container.main-wrap/* 重要 */效果如下：.aside/* 重要 */
下面盒子，無論負margin設定多少，只能在原來所在行浮動。（如上圖
aside 只能在本行浮動）
2、盒子上下排列，上面盒子設定float屬性，下面盒子沒有設定float屬性
.container.main-wrap/* 重要 */效果如下：.aside/* 重要,其中margin-left 負值自己自行調整 */
下面盒子降跑向上面盒子所在位置，上面盒子蓋在下面盒子上面。 （如上圖
main-wrap 就會蓋在 aside 上面）
無論負margin設定多少，也只能在原來所在行浮動，負maring值越大超出瀏覽器顯示，則直接隱藏不顯示。
3、盒子上下排列，上下盒子都設定float屬性，
.main-wrap/* 重要 */效果如下：.aside/* 重要 */
下面盒子將緊挨著上面盒子浮動。
當負值正好大於等於下盒子寬度是下盒子跑到上盒子所在行
.main-wrap/* 重要 */效果如下：.aside/* 重要,其中margin-left 負值自己自行調整 */
margin為負的理解
margin是盒模型中乙個很重要的概念，是border之外的區域，我們通常稱作外邊距，有margin top,margin right,margin bottom.moargin left四個外邊距。注意我書寫的順序是從上開始順時針的順序。對於這四個值，我們在設定的時候必然只能有4種情況 乙個值 兩...
如何理解margin值為負
通常來說margin為正值時，我們很清楚其布局形式，即在border邊界線處再往外擴充套件指定長短。可margin為負又表示什麼呢，表示始於border邊界線處並向內擴充套件指定長短，這樣，下乙個文件流物件便是從margin邊界線處起，顯示出來。示例 1 頁面效果 此時有乙個margin邊界線我們看...
理解並運用 CSS 的負 margin 值
本文樣式 採用 scss。瀏覽器相容性為 ie6 你的網頁中，不可能沒有使用過 margin。大多數情況下，我們採用的都是正數的 margin 值，可能有時候會用到負的 margin 值。在我們的印象中，負的 margin 值就類似於瀏覽器的 hack 一樣，不被人接受。但是，本文要說明的就是，負的...