現(xian)在(zai)很(hen)多(duo)網(wang)頁(ye)都(dou)做(zuo)得(de)特(te)別(bie)炫(xuan)，因(yin)此(ci)很(hen)多(duo)時(shi)候(hou)大(da)家(jia)都(dou)想(xiang)著(zhe)實(shi)現(xian)一(yi)些(xie)看(kan)上(shang)去(qu)吊(diao)炸(zha)天(tian)的(de)效(xiao)果(guo)，而(er)這(zhe)些(xie)前(qian)端(duan)的(de)效(xiao)果(guo)不(bu)管(guan)怎(zen)麼(me)華(hua)麗(li)最(zui)原(yuan)始(shi)的(de)基(ji)礎(chu)還(hai)是(shi)那(na)一(yi)行(xing)行(xing)的(de)代(dai)碼(ma)，HTML+CSS+JS就是前端的三劍客。
今天我們就講一講我們最近的一個實踐，就是讓一副圖片填滿整個屏幕(除去瀏覽器所占區域哦)。通常有兩種比較經典的效果，用到的原理之一就是這個。一個就是在PC上經常看到一些網頁鼠標動一下翻一整頁，另外一個就類似與手機APP第一次打開是的引導頁。
而不管是哪個實例，我們都要做到的一個效果就是讓一個HTML元素(標簽)的區域鋪滿全屏?就算是傳統的PC網頁，我們也要接受不同的電腦屏幕高度，在傳統的網頁設計中我們可能采用一個固定的寬度，比如960px、1000px、1200px，當然現在這種固定寬度的設計依然很流行，隻是把這個固定的寬度增加了(電腦屏幕的提升，嗬嗬)。但如果要實現上述我們提到的看上去酷炫的風格，我們顯然不能使用固定的寬度和高度。
顯然，我們需要使用自適應的寬高;大家都知道寬度自適應似乎比高度自適應來的更簡單。可能大家都有這樣的經曆，認為寬度100%比高度100%的適用範圍更加廣;而實際上也是如此。
假設我們現在值在網頁上寫了、、三個最基本的標簽(實際上就是很多編輯器新建一個document默認所擁有的)，我們來看的盒模型
大家可以看到寬度是1350px，其實就如果出去margin就是我當前可用屏幕區域的100%寬度，而高度顯然不是這樣;這樣我們可以通俗地理解為寬度的100%比高度的100%應用範圍更廣。
因此要實現我們的需求，寬度方麵在沒有特殊情況下直接使用100%即可解決;而高度我們自然也想到過用100%,但不得不考慮它的適用範圍了。其實不管是寬度也好，高度也罷，它們的100%(當然其他數值也一樣)是以它們的父節點作為參考的，而最大的“祖宗”的默認寬度就是100%，而高度為0。
因此得到全屏展示當然我們也想到了兩種方式，一種是CSS，另外一種則是在靜態CSS無法實現的時候采用JS對HTML進行DOM操作動態改變元素的CSS屬性值。
1、CSS方式
在使用CSS方式的時候必須有前提的，就拿高度的100%來說，咱們必須定義它的父級元素的高度，而且高度為鋪滿全屏的高度。同時注意不要有其他的CSS衝突，比如我們使用position:absolute(絕對定位)的時候我們使用高度100%就會失效了。
2、javascript方式
如果因為我們的這個模塊的需求，導致我們不能滿足使用CSS完成這一需求的時候，我們就要動用JS，來做了。當然我們不管 是用原生的JS還是jquery等框架。我們必須選對相應的對象及其方法。比如很多人說應該選擇Screen對象，其實我覺得不是這樣的，因為不管是我們的pc也好還是我們的移動端也好，瀏覽器本身往往已經占用了一定的位置，因此我建議使用window對象來獲取尺寸的數值，然後通過DOM對HTML元素的CSS屬性值進行改變。
