大家好，我是IT修真院鄭州分院第四期的學(xué)員汪開(kāi)放捍岳，一枚正直純潔善良的web程序員
今天給大家分享一下富寿，margin負(fù)值的應(yīng)用
1.背景介紹
CSS盒模型中，margin是我們老熟悉的一個(gè)屬性了祟同， 它的負(fù)值你用過(guò)嗎作喘？ 知道經(jīng)典的圣杯布局嗎？
2.知識(shí)剖析
margin負(fù)值的設(shè)置：
{margin-left:-100px;}或者{margin-left:-100%;}
1晕城、負(fù)margin是絕對(duì)標(biāo)準(zhǔn)的CSS泞坦，W3C標(biāo)準(zhǔn)對(duì)于margin屬性來(lái)說(shuō)，負(fù)值是被允許的砖顷。
2贰锁、不脫離文檔流, 不使用float的話赃梧，負(fù)margin元素是不會(huì)破壞頁(yè)面的文檔流妇垢。
所以如果你使用負(fù)margin上移一個(gè)元素反惕，所有跟隨的元素都會(huì)被上移。
3诫钓、完全兼容 所有現(xiàn)代瀏覽器基本上都支持負(fù)margin（IE6在大多數(shù)情況下也支持）锣险。
4蹄皱、浮動(dòng)會(huì)影響負(fù)margin的使用 ，所以負(fù)margin使用時(shí)應(yīng)小心謹(jǐn)慎芯肤。
什么是圣杯布局巷折？
曾經(jīng)有這樣一個(gè)經(jīng)典的需求：
1）兩欄抑或三欄布局，主體自適應(yīng)寬度崖咨；
2）一個(gè)或兩個(gè)側(cè)邊欄固定寬度锻拘；
3）主體部分xhtml結(jié)構(gòu)在最前面（網(wǎng)速慢時(shí)可以優(yōu)先顯示，對(duì)SEO有利）
4）自適應(yīng)高度击蹲，且不影響等高署拟；
5）兼容IE6+，firefox歌豺，chrome推穷，opera。
于是乎margin負(fù)值便大放光彩世曾，首先是國(guó)外出現(xiàn)的圣杯布局缨恒，掀起一股margin負(fù)值熱潮
兩邊定寬谴咸，中間自適應(yīng)的三欄布局轮听，中間欄要放在文檔流前面以優(yōu)先渲染。
如果使用得當(dāng)岭佳，負(fù)margin是非常強(qiáng)大的屬性血巍，以下是2種可以使用margin的場(chǎng)景。
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.實(shí)現(xiàn)圣杯布局
3.常見(jiàn)問(wèn)題
如何實(shí)現(xiàn)圣杯布局珊随？
4.解決辦法
5.編碼實(shí)戰(zhàn)
1）基本布局
Header內(nèi)容區(qū)
中間彈性區(qū)
左邊欄
右邊欄
2)利用負(fù)邊距讓左右兩個(gè)盒子浮動(dòng)上去
.left {margin-left:-100%;}
.right {margin-left：-200px;}
3）遇到的問(wèn)題
4)讓中間自適應(yīng)的盒子安全顯示
.container{ padding: 0? 200px;}
.left{ position: relative; left: -200px;}
.right{position: relative;right: -200px;
5)完成圖
6.擴(kuò)展思考
margin負(fù)值還能運(yùn)用到哪些地方述寡？
7.參考文獻(xiàn)：
8.更多討論
曾聽(tīng)有人講過(guò)不建議使用margin負(fù)值？大家知道為什么嗎叶洞？
文本鏈接：文本鏈接
視頻鏈接：視頻鏈接
今天的分享就到這里啦鲫凶，歡迎大家點(diǎn)贊、轉(zhuǎn)發(fā)衩辟、留言螟炫、拍磚~
--------------------------------------------------------------------------------------------------------------------
技能樹(shù).IT修真院
“我們相信人人都可以成為一個(gè)工程師，現(xiàn)在開(kāi)始艺晴，找個(gè)師兄昼钻，帶你入門(mén)掸屡，掌控自己學(xué)習(xí)的節(jié)奏，學(xué)習(xí)的路上不再迷萌黄溃”仅财。
這里是技能樹(shù).IT修真院，成千上萬(wàn)的師兄在這里找到了自己的學(xué)習(xí)路線碗淌，學(xué)習(xí)透明化盏求，成長(zhǎng)可見(jiàn)化，師兄1對(duì)1免費(fèi)指導(dǎo)亿眠》缋快來(lái)與我一起學(xué)習(xí)吧?！
填寫(xiě)我的邀請(qǐng)碼可以獲得未知優(yōu)惠喲：93881593
或者你可以直接點(diǎn)擊此鏈接：邀請(qǐng)碼鏈接
