詳解：怎么讓一個(gè)HTML元素的區(qū)域鋪滿全屏？

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

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

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

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

假設(shè)我們現(xiàn)在值在網(wǎng)頁(yè)上寫(xiě)了、、三個(gè)最基本的標(biāo)簽(實(shí)際上就是很多編輯器新建一個(gè)document默認(rèn)所擁有的)，我們來(lái)看的盒模型

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

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

因此得到全屏展示當(dāng)然我們也想到了兩種方式，一種是CSS，另外一種則是在靜態(tài)CSS無(wú)法實(shí)現(xiàn)的時(shí)候采用JS對(duì)HTML進(jìn)行DOM操作動(dòng)態(tài)改變?cè)氐腃SS屬性值。

1、CSS方式

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

2、javascript方式

如果因?yàn)槲覀兊倪@個(gè)模塊的需求，導(dǎo)致我們不能滿足使用CSS完成這一需求的時(shí)候，我們就要?jiǎng)佑肑S，來(lái)做了。當(dāng)然我們不管 是用原生的JS還是jquery等框架。我們必須選對(duì)相應(yīng)的對(duì)象及其方法。比如很多人說(shuō)應(yīng)該選擇Screen對(duì)象，其實(shí)我覺(jué)得不是這樣的，因?yàn)椴还苁俏覀兊膒c也好還是我們的移動(dòng)端也好，瀏覽器本身往往已經(jīng)占用了一定的位置，因此我建議使用window對(duì)象來(lái)獲取尺寸的數(shù)值，然后通過(guò)DOM對(duì)HTML元素的CSS屬性值進(jìn)行改變。

文章名稱：詳解：怎么讓一個(gè)HTML元素的區(qū)域鋪滿全屏？
網(wǎng)站鏈接：http://www.muchs.cn/news/67519.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開(kāi)發(fā)、域名注冊(cè)、搜索引擎優(yōu)化、ChatGPT、品牌網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)