中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

怎么讓一個HTML元素的區(qū)域鋪滿全屏

2022-05-02    分類: 網(wǎng)站建設(shè)

現(xiàn)在很多網(wǎng)頁都做得特別絢,因此很多時候大家都想著實現(xiàn)一些看上去吊炸天的效果,而這些前端的效果不管怎么華麗最原始的基礎(chǔ)還是那一行行的代碼,HTML+CSS+JS就是前端的三劍客。
今天創(chuàng)新互聯(lián)就講一講我們最近的一個實踐,嗎就是讓一副圖片填滿整個屏幕(除去瀏覽器所占區(qū)域哦)。通常有兩種比較經(jīng)典的效果,用到的原理之一就是這個。一個就是在PC上經(jīng)常看到一些網(wǎng)頁鼠標(biāo)動一下翻一整頁,另外一個就類似與手機APP第一次打開是的引導(dǎo)頁。
而不管是哪個實例,我們都要做到的一個效果就是讓一個HTML元素(標(biāo)簽)的區(qū)域鋪滿全屏?就算是傳統(tǒng)的PC網(wǎng)頁,我們也要接受不同的電腦屏幕高度,在傳統(tǒng)的網(wǎng)頁設(shè)計中我們可能采用一個固定的寬度,比如960px、1000px、1200px,當(dāng)然現(xiàn)在這種固定寬度的設(shè)計依然很流行,只是把這個固定的寬度增加了(電腦屏幕的提升,呵呵)。但如果要實現(xiàn)上述我們提到的看上去酷炫的風(fēng)格,我們顯然不能使用固定的寬度和高度。
顯然,我們需要使用自適應(yīng)的寬高;大家都知道寬度自適應(yīng)似乎比高度自適應(yīng)來的更簡單??赡艽蠹叶加羞@樣的經(jīng)歷,認(rèn)為寬度100%比高度100%的適用范圍更加廣;而實際上也是如此。
大家可以看到寬度是1350px,其實就如果出去margin就是我當(dāng)前可用屏幕區(qū)域的100%寬度,而高度顯然不是這樣;這樣我們可以通俗地理解為寬度的100%比高度的100%應(yīng)用范圍更廣。
因此要實現(xiàn)我們的需求,寬度方面在沒有特殊情況下直接使用100%即可解決;而高度我們自然也想到過用100%,但不得不考慮它的適用范圍了。其實不管是寬度也好,高度也罷,它們的100%(當(dāng)然其他數(shù)值也一樣)是以它們的父節(jié)點作為參考的,而大的“祖宗”的默認(rèn)寬度就是100%,而高度為0。
因此得到全屏展示當(dāng)然我們也想到了兩種方式,一種是CSS,另外一種則是在靜態(tài)CSS無法實現(xiàn)的時候采用JS對HTML進行DOM操作動態(tài)改變元素的CSS屬性值。
1、CSS方式
在使用CSS方式的時候必須有前提的,就拿高度的100%來說,咱們必須定義它的父級元素的高度,而且高度為鋪滿全屏的高度。同時注意不要有其他的CSS沖突,比如我們使用position:absolute(絕對定位)的時候我們使用高度100%就會失效了。
2、javascript方式
如果因為我們的這個模塊的需求,導(dǎo)致我們不能滿足使用CSS完成這一需求的時候,我們就要動用JS,來做了。當(dāng)然我們不管 是用原生的JS還是jquery等框架。我們必須選對相應(yīng)的對象及其方法。比如很多人說應(yīng)該選擇Screen對象,其實我覺得不是這樣的,因為不管是我們的pc也好還是我們的移動端也好,瀏覽器本身往往已經(jīng)占用了一定的位置,因此我建議使用window對象來獲取尺寸的數(shù)值,然后通過DOM對HTML元素的CSS屬性值進行改變。

當(dāng)前文章:怎么讓一個HTML元素的區(qū)域鋪滿全屏
文章鏈接:http://m.rwnh.cn/news12/148912.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供搜索引擎優(yōu)化、App設(shè)計、關(guān)鍵詞優(yōu)化軟件開發(fā)、網(wǎng)站內(nèi)鏈移動網(wǎng)站建設(shè)

廣告

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

成都定制網(wǎng)站建設(shè)
思茅市| 昆明市| 基隆市| 双鸭山市| 广饶县| 永和县| 曲水县| 元谋县| 化州市| 井研县| 德兴市| 瓦房店市| 同德县| 大荔县| 昭苏县| 木兰县| 华阴市| 通江县| 沾化县| 友谊县| 江川县| 高雄县| 咸宁市| 星座| 泰顺县| 留坝县| 姚安县| 夏津县| 大关县| 定远县| 东明县| 黄浦区| 赞皇县| 靖西县| 新民市| 隆安县| 海口市| 鄂托克前旗| 铁力市| 秦安县| 大关县|