HTML+CSS+JS就是前端的(de)三劍客

　　現在很多(duō)網頁都做(zuò)得(de)特别炫，因此很多(duō)時(shí)候大(dà)家都想著(zhe)實現一些看上去吊炸天的(de)效果，而這(zhè)些前端的(de)效果不管怎麽華麗最原始的(de)基礎還(hái)是那一行行的(de)代碼，HTML+CSS+JS就是前端的(de)三劍客。

　　今天我們就講一講我們最近的(de)一個(gè)實踐，就是讓一副圖片填滿整個(gè)屏幕(除去浏覽器所占區(qū)域哦)。通(tōng)常有兩種比較經典的(de)效果，用(yòng)到的(de)原理(lǐ)之一就是這(zhè)個(gè)。一個(gè)就是在PC上經常看到一些網頁鼠标動一下(xià)翻一整頁，另外一個(gè)就類似與手機APP第一次打開是的(de)引導頁。

　　而不管是哪個(gè)實例，我們都要做(zuò)到的(de)一個(gè)效果就是讓一個(gè)HTML元素(标簽)的(de)區(qū)域鋪滿全屏?就算(suàn)是傳統的(de)PC網頁，我們也(yě)要接受不同的(de)電腦(nǎo)屏幕高(gāo)度，在傳統的(de)網頁設計中我們可(kě)能采用(yòng)一個(gè)固定的(de)寬度，比如960px、1000px、1200px，當然現在這(zhè)種固定寬度的(de)設計依然很流行，隻是把這(zhè)個(gè)固定的(de)寬度增加了(le)(電腦(nǎo)屏幕的(de)提升，呵呵)。但如果要實現上述我們提到的(de)看上去酷炫的(de)風格，我們顯然不能使用(yòng)固定的(de)寬度和(hé)高(gāo)度。

　　顯然，我們需要使用(yòng)自适應的(de)寬高(gāo);大(dà)家都知道寬度自适應似乎比高(gāo)度自适應來(lái)的(de)更簡單。可(kě)能大(dà)家都有這(zhè)樣的(de)經曆，認爲寬度100%比高(gāo)度100%的(de)适用(yòng)範圍更加廣;而實際上也(yě)是如此。

　　假設我們現在值在網頁上寫了(le)、、三個(gè)最基本的(de)标簽(實際上就是很多(duō)編輯器新建一個(gè)document默認所擁有的(de))，我們來(lái)看的(de)盒模型

　　大(dà)家可(kě)以看到寬度是1350px，其實就如果出去margin就是我當前可(kě)用(yòng)屏幕區(qū)域的(de)100%寬度，而高(gāo)度顯然不是這(zhè)樣;這(zhè)樣我們可(kě)以通(tōng)俗地理(lǐ)解爲寬度的(de)100%比高(gāo)度的(de)100%應用(yòng)範圍更廣。

　　因此要實現我們的(de)需求，寬度方面在沒有特殊情況下(xià)直接使用(yòng)100%即可(kě)解決;而高(gāo)度我們自然也(yě)想到過用(yòng)100%,但不得(de)不考慮它的(de)适用(yòng)範圍了(le)。其實不管是寬度也(yě)好，高(gāo)度也(yě)罷，它們的(de)100%(當然其他(tā)數值也(yě)一樣)是以它們的(de)父節點作爲參考的(de)，而最大(dà)的(de)“祖宗”的(de)默認寬度就是100%，而高(gāo)度爲0。

　　因此得(de)到全屏展示當然我們也(yě)想到了(le)兩種方式，一種是CSS，另外一種則是在靜态CSS無法實現的(de)時(shí)候采用(yòng)JS對(duì)HTML進行DOM操作動态改變元素的(de)CSS屬性值。

　　1、CSS方式

　　在使用(yòng)CSS方式的(de)時(shí)候必須有前提的(de)，就拿高(gāo)度的(de)100%來(lái)說，咱們必須定義它的(de)父級元素的(de)高(gāo)度，而且高(gāo)度爲鋪滿全屏的(de)高(gāo)度。同時(shí)注意不要有其他(tā)的(de)CSS沖突，比如我們使用(yòng)position:absolute(絕對(duì)定位)的(de)時(shí)候我們使用(yòng)高(gāo)度100%就會失效了(le)。

　　2、javascript方式

　　如果因爲我們的(de)這(zhè)個(gè)模塊的(de)需求，導緻我們不能滿足使用(yòng)CSS完成這(zhè)一需求的(de)時(shí)候，我們就要動用(yòng)JS，來(lái)做(zuò)了(le)。當然我們不管 是用(yòng)原生的(de)JS還(hái)是jquery等框架。我們必須選對(duì)相應的(de)對(duì)象及其方法。比如很多(duō)人(rén)說應該選擇Screen對(duì)象，其實我覺得(de)不是這(zhè)樣的(de)，因爲不管是我們的(de)pc也(yě)好還(hái)是我們的(de)移動端也(yě)好，浏覽器本身往往已經占用(yòng)了(le)一定的(de)位置，因此我建議(yì)使用(yòng)window對(duì)象來(lái)獲取尺寸的(de)數值，然後通(tōng)過DOM對(duì)HTML元素的(de)CSS屬性值進行改變。