国产又猛又爽又黄视频|在线观看人成视频免费|少妇高潮太爽了在线视频|911国产免费无码专区|特黄做受又大又粗又长大片|欧美一级二级免费在线观看|日日夜人人澡人人澡人人看免|欧洲午夜精品一级毛片在线播放

前端實踐:怎么讓一個HTML元素（標簽）的區(qū)域鋪滿全屏？

2014-12-25 15:30 欄目：技術(shù)開發(fā) 查看(49467)

前端實踐:怎么讓一個HTML元素（標簽）的區(qū)域鋪滿全屏？

現(xiàn)在很多網(wǎng)頁都做得特別絢，因此很多時候大家都想著實現(xiàn)一些看上去吊炸天的效果，而這些前端的效果不管怎么華麗最原始的基礎(chǔ)還是那一行行的代碼，HTML+CSS+JS就是前端的三劍客。

今天我們就講一講我們最近的一個實踐，嗎就是讓一副圖片填滿整個屏幕（除去瀏覽器所占區(qū)域哦）。通常有兩種比較經(jīng)典的效果，用到的原理之一就是這個。一個就是在PC上經(jīng)?？吹揭恍┚W(wǎng)頁鼠標動一下翻一整頁，另外一個就類似與手機APP第一次打開是的引導(dǎo)頁。

而不管是哪個實例，我們都要做到的一個效果就是讓一個HTML元素（標簽）的區(qū)域鋪滿全屏？就算是傳統(tǒng)的PC網(wǎng)頁，我們也要接受不同的電腦屏幕高度，在傳統(tǒng)的網(wǎng)頁設(shè)計中我們可能采用一個固定的寬度，比如960px、1000px、1200px，當然現(xiàn)在這種固定寬度的設(shè)計依然很流行，只是把這個固定的寬度增加了（電腦屏幕的提升，呵呵）。但如果要實現(xiàn)上述我們提到的看上去酷炫的風格，我們顯然不能使用固定的寬度和高度。

顯然，我們需要使用自適應(yīng)的寬高；大家都知道寬度自適應(yīng)似乎比高度自適應(yīng)來的更簡單。可能大家都有這樣的經(jīng)歷，認為寬度100%比高度100%的適用范圍更加廣；而實際上也是如此。

假設(shè)我們現(xiàn)在值在網(wǎng)頁上寫了<html>、<head>、<body>三個最基本的標簽（實際上就是很多編輯器新建一個document默認所擁有的），我們來看<body>的盒模型

前端實踐:怎么讓一個HTML元素（標簽）的區(qū)域鋪滿全屏？

大家可以看到寬度是1350px，其實就如果出去margin就是我當前可用屏幕區(qū)域的100%寬度，而高度顯然不是這樣；這樣我們可以通俗地理解為寬度的100%比高度的100%應(yīng)用范圍更廣。

因此要實現(xiàn)我們的需求，寬度方面在沒有特殊情況下直接使用100%即可解決；而高度我們自然也想到過用100%,但不得不考慮它的適用范圍了。其實不管是寬度也好，高度也罷，它們的100%（當然其他數(shù)值也一樣）是以它們的父節(jié)點作為參考的，而最大的“祖宗”<html>的默認寬度就是100%，而高度為0。

因此得到全屏展示當然我們也想到了兩種方式，一種是CSS，另外一種則是在靜態(tài)CSS無法實現(xiàn)的時候采用JS對HTML進行DOM操作動態(tài)改變元素的CSS屬性值。

CSS方式

在使用CSS方式的時候必須有前提的，就拿高度的100%來說，咱們必須定義它的父級元素的高度，而且高度為鋪滿全屏的高度。同時注意不要有其他的CSS沖突，比如我們使用position:absolute（絕對定位）的時候我們使用高度100%就會失效了。

javascript方式

如果因為我們的這個模塊的需求，導(dǎo)致我們不能滿足使用CSS完成這一需求的時候，我們就要動用JS，來做了。當然我們不管 是用原生的JS還是jquery等框架。我們必須選對相應(yīng)的對象及其方法。比如很多人說應(yīng)該選擇Screen對象，其實我覺得不是這樣的，因為不管是我們的pc也好還是我們的移動端也好，瀏覽器本身往往已經(jīng)占用了一定的位置，因此我建議使用window對象來獲取尺寸的數(shù)值，然后通過DOM對HTML元素的CSS屬性值進行改變。

與我們的項目經(jīng)理聯(lián)系
掃二維碼與項目經(jīng)理溝通

我們在微信上24小時期待你的聲音

解答本文疑問/技術(shù)咨詢/運營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流

轉(zhuǎn)載請注明出處：前端實踐:怎么讓一個HTML元素（標簽）的區(qū)域鋪滿全屏？ - 微構(gòu)網(wǎng)絡(luò)
分享：