大家好，我是IT修真院北京分院第23期的學(xué)員楊夢桐，一枚正直純潔善良的Web程序員。
今天給大家分享一下，修真院官網(wǎng)CSS任務(wù)7的知識(shí)點(diǎn)——如何制作CSS Sprite和任務(wù)8中的知識(shí)點(diǎn)——margin負(fù)值的應(yīng)用。
1. 背景介紹
在頁面布局中，有很多的可以應(yīng)用在頁面布局中的小技巧，這篇文章主要是關(guān)于CSS雪碧圖和margin負(fù)值的應(yīng)用。
首先總結(jié)一下雪碧圖。
CSS Sprite（雪碧圖）其實(shí)就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”、“background-position”的組合進(jìn)行背景定位，用數(shù)字精確地定位出背景圖片的位置。
這樣一來，當(dāng)訪問該頁面時(shí)，客戶端只需要向服務(wù)器請求少量的圖片，圖片越多請求次數(shù)越少，造成延遲的可能性也就越小，能有效減輕服務(wù)器的壓力，這是CSS Sprites最大的優(yōu)點(diǎn)，也是其被廣泛傳播和應(yīng)用的主要原因。
目前很多的大型網(wǎng)站如淘寶等，為了保證自己的網(wǎng)頁加載速度，所以要在小圖標(biāo)的地方應(yīng)用雪碧圖。
首先，將需要拼接成雪碧圖的小圖標(biāo)從Ps中導(dǎo)出來，然后使用軟件拼接成雪碧圖。
2. 解決方案
這里推薦一個(gè)制作CSS Sprite的軟件：CSS gaga。
點(diǎn)擊圖片合成，把所有小圖標(biāo)全選中，拖入窗口，就可以合成雪碧圖，并返回一個(gè)坐標(biāo)的.txt文件。
實(shí)際在使用雪碧圖的時(shí)候，由于div內(nèi)顯示的是原點(diǎn)（0,0）位置的圖，其他圖片要移到原點(diǎn)才能顯示，所以要向坐標(biāo)軸負(fù)軸方向移動(dòng)，x，y位置都是負(fù)的。
接下來是關(guān)于margin負(fù)值的應(yīng)用。
1.背景介紹
我們在CSS中都會(huì)使用margin，但將margin設(shè)置成負(fù)數(shù)，那可能就不大好處理了。但是在實(shí)際的編程布局中，負(fù)margin可以在簡化代碼的同時(shí)達(dá)成理想的CSS布局效果。
2.知識(shí)剖析
以下幾點(diǎn)是需要知道的。
1. 負(fù)margin是絕對標(biāo)準(zhǔn)的CSS
2. 不脫離文檔流，不使用float的話，負(fù)margin元素是不會(huì)破壞頁面的文檔流。所以如果你使用負(fù)margin上移一個(gè)元素，所有跟隨的元素都會(huì)被上移。
3. 完全兼容:所有現(xiàn)代瀏覽器都完全支持負(fù)margin（IE6在大多數(shù)情況下也支持）。
4. 浮動(dòng)會(huì)影響負(fù)margin的使用，負(fù)margin不是你每天都用的CSS屬性，應(yīng)用時(shí)應(yīng)小心謹(jǐn)慎。
3. 編程實(shí)戰(zhàn)
如圖，就是設(shè)置負(fù)margin的效果。
子元素css代碼如下
如果是設(shè)置了負(fù)的margin-bottom，就會(huì)出現(xiàn)如下的效果，下面的元素會(huì)覆蓋上面的元素。
根據(jù)這些效果，參考https://www.w3cplus.com/css/the-definitive-guide-to-using-negative-margins.html，設(shè)置一個(gè)負(fù)二倍行高的margin-top，就可以產(chǎn)生如下的分三列效果。
除此之外，還有其他的應(yīng)用，比如文字3D效果。
設(shè)置兩個(gè)寬高相等的div包含相同的內(nèi)容，然后給第一個(gè)div設(shè)置一個(gè)比高小1到2個(gè)px的負(fù)margin-bottom，就可以達(dá)成這個(gè)效果。
html代碼
css代碼
還可以使用負(fù)margin改變子元素的居中
用藍(lán)色div包裹粉色div，藍(lán)色div絕對定位，top和left為50%，粉色div上方右方為負(fù)50%的margin，即在父元素中居中。
像這樣的三行布局也可以通過負(fù)margin實(shí)現(xiàn)，為其設(shè)置等高的padding-bottom和margin-bottom，父div設(shè)置overflow：hidden；即可。
參考文獻(xiàn)
參考一：淺談 CSS Sprites 雪碧圖應(yīng)用
參考三：負(fù)值之美：負(fù)margin在頁面布局中的應(yīng)用
今天的分享就到這里啦，歡迎大家點(diǎn)贊、轉(zhuǎn)發(fā)、留言、拍磚~
我們下周再見！
------------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個(gè)工程師，現(xiàn)在開始，找個(gè)師兄，帶你入門，掌控自己學(xué)習(xí)的節(jié)奏，學(xué)習(xí)的路上不再迷茫”。
這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學(xué)習(xí)路線，學(xué)習(xí)透明化，成長可見化，師兄1對1免費(fèi)指導(dǎo)。快來與我一起學(xué)習(xí)吧~
我的邀請鏈接：jnshu.com/login/1/69475143
