溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

margin的無(wú)邊界問題以及圖片的block屬性問題

發(fā)布時(shí)間：2020-06-16 18:35:53 來(lái)源：網(wǎng)絡(luò) 閱讀：527 作者：你的傾城 欄目：開發(fā)技術(shù)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,initial-scale=1">

<title>Document</title>

<style>

*{

padding:0;

margin:0;

}

html{

height:100%;

font-size:100px;

}

body{

height:100%;

}

.top-img{

   width:100%;

   height:0.4rem;

   position:absolute;

   left:0;

   top:0;

}

.div1{

margin-top:1rem;

width:100%;

height:1rem;

background:red;

}

.div2{

width:100%;

height:1rem;

background:blue;

}

</style>

</head>

<body>

<img src="p_w_picpaths/ms_01.png" alt="" class="top-img">

<div class="div1"></div>

<div class="div2"></div>

<script>

var screenW = document.documentElement.offsetWidth || document.body.offsetWidth;

console.log(screenW)

var nowW = screenW/640 * 100;

var oHtml = document.getElementsByTagName('html')[0];

oHtml.style.fontSize = nowW + 'px';

console.log(nowW)

</script>

</body>

</html>


 這是移動(dòng)端開發(fā)的一個(gè)小測(cè)試。按照上面的代碼，最終的結(jié)果是頁(yè)面產(chǎn)生了滾動(dòng)條，為啥呢！??！，糾結(jié)死。。。

究其原因，發(fā)現(xiàn)其實(shí)是margin的無(wú)邊界問題，.top-img設(shè)置了絕對(duì)定位，所以在給.div1加上margin-top后由于沒有相對(duì)的邊界所以body的高度被撐開了所以就有了滾動(dòng)體。

解決辦法，去掉.top-img的絕對(duì)定位改為：

.top-img{

    width:100%;

    height:0.4rem;

}

以為這樣就行了，no！，這個(gè)時(shí)候.top-img會(huì)把上面下面都撐開一段距離，不止3像素，不知道到底是啥原因，反正再加上display:block就搞定了。。。



向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手