大家好，我是IT修真院鄭州分院第四期的學員汪開放，一枚正直純潔善良的web程序員
今天給大家分享一下，margin負值的應用
1.背景介紹
CSS盒模型中，margin是我們老熟悉的一個屬性了， 它的負值你用過嗎？ 知道經典的圣杯布局嗎？
2.知識剖析
margin負值的設置：
{margin-left:-100px;}或者{margin-left:-100%;}
1、負margin是絕對標準的CSS，W3C標準對于margin屬性來說，負值是被允許的。
2、不脫離文檔流, 不使用float的話，負margin元素是不會破壞頁面的文檔流。
所以如果你使用負margin上移一個元素，所有跟隨的元素都會被上移。
3、完全兼容 所有現代瀏覽器基本上都支持負margin（IE6在大多數情況下也支持）。
4、浮動會影響負margin的使用 ，所以負margin使用時應小心謹慎。
什么是圣杯布局？
曾經有這樣一個經典的需求：
1）兩欄抑或三欄布局，主體自適應寬度；
2）一個或兩個側邊欄固定寬度；
3）主體部分xhtml結構在最前面（網速慢時可以優先顯示，對SEO有利）
4）自適應高度，且不影響等高；
5）兼容IE6+，firefox，chrome，opera。
于是乎margin負值便大放光彩，首先是國外出現的圣杯布局，掀起一股margin負值熱潮
兩邊定寬，中間自適應的三欄布局，中間欄要放在文檔流前面以優先渲染。
如果使用得當，負margin是非常強大的屬性，以下是2種可以使用margin的場景。
1. 使用margin水平垂直居中
body{margin:0;padding:0;}
#test{
width:200px;
height:200px;
background:#F60;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
2.實現圣杯布局
3.常見問題
如何實現圣杯布局？
4.解決辦法
5.編碼實戰
1）基本布局
Header內容區
中間彈性區
左邊欄
右邊欄
2)利用負邊距讓左右兩個盒子浮動上去
.left {margin-left:-100%;}
.right {margin-left：-200px;}
3）遇到的問題
4)讓中間自適應的盒子安全顯示
.container{ padding: 0? 200px;}
.left{ position: relative; left: -200px;}
.right{position: relative;right: -200px;
5)完成圖
6.擴展思考
margin負值還能運用到哪些地方？
7.參考文獻：
8.更多討論
曾聽有人講過不建議使用margin負值？大家知道為什么嗎？
文本鏈接：文本鏈接
視頻鏈接：視頻鏈接
今天的分享就到這里啦，歡迎大家點贊、轉發、留言、拍磚~
--------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個工程師，現在開始，找個師兄，帶你入門，掌控自己學習的節奏，學習的路上不再迷茫”。
這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學習路線，學習透明化，成長可見化，師兄1對1免費指導。快來與我一起學習吧?！
填寫我的邀請碼可以獲得未知優惠喲：93881593
或者你可以直接點擊此鏈接：邀請碼鏈接
