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