大家好，我是IT修真院深圳分院第01期學員，一枚正直善良的web程序員。
今天給大家分享一下，修真院官網 CSS任務中頁面布局部分可能會使用到的知識點：
MARGIN負值在頁面布局中有哪些應用？
1.背景介紹
CSS盒模型中，margin是我們非常熟悉的一個屬性，但是它的負值你用過嗎？
2.知識剖析
2.1、一個負margin應該是這樣設置的：
和常規的margin相差無幾，不同的是將它的值設置為負數
A、負margin是絕對標準的CSS，W3C標準對于margin屬性來說，負值是合法的。
B、不脫離文檔流，不使用float的話，負margin元素是不會破壞頁面的文檔流。所以如果你使用負margin上移一個元素，所有跟隨它的元素都會被上移。
C、完全兼容，所有現代瀏覽器都完全支持負margin（IE6在大多數情況下也支持）。
D、浮動會影響負margin的使用，負margin不是你每天都用的CSS屬性，應用時應小心謹慎。
2.2、如果使用得當，負margin是非常強大的屬性，以下是幾種可以使用margin的場景。
? ? ? ?1、使用margin水平垂直居中
需要掌握元素的寬高
? ? ? ?2、實現圣杯布局，雙飛翼布局等
? ? ? ?3、實現元素位置偏移效果，以達到頁面布局目的
3.常見問題
? ?經典的圣杯布局是怎么通過margin負值來實現的？
4.解決方案
曾經有這樣一個經典的需求：
? ? ? ?1、兩欄抑或三欄布局，主體自適應寬度;
? ? ? ?2、一個或兩個側邊欄固定寬度;
? ? ? ?3、主體部分HTML結構在最前面（網速慢時可以優先顯示，對SEO有利）;
? ? ? ?4、自適應高度，且不影響等高;
? ? ? ?5、兼容IE6+，firefox，chrome，opera。 于是乎margin負值便大放光彩，首先是國外出現的圣杯布局，掀起一股margin負值熱潮。
首先將三個塊狀元素設置左浮動
然后設置sub和extra的margin-left為負值，將它們浮動到main的左右兩側即可
經典的圣杯布局，通過margin負值和float實現
5.擴展思考
margin負值是否會改變元素的寬度？
首先有一個ul元素，初始width是460
然后添加一個margin負值，它的width就發生變化了
需要注意的是，如果提前設置ul的width，則上述效果無效
6.參考文獻
CSS布局騷操作之-強大的負邊距
圣杯布局和雙飛翼布局
負margin在頁面布局中的應用
7.更多討論
詳見視頻：
_騰訊視頻
問：margin負值對浮動元素有什么影響？
? ? ? 答：如上述的圣杯布局實現原理，后面的元素會覆蓋前面的元素；
問：margin負值對元素寬度是否有影響？
? ? ? 答：如果元素本身未設置width屬性，那么margin負值則會影響它的寬度；
問：margin負值還能運用到哪些地方？
? ? ? 答：。。。
