问答详情
源自：9-21 网页卷去的距离与偏移量

为什么 offsetTop 是18px ，而 offsetLeft 是23px？

为什么 offsetTop 是18px ，而 offsetLeft 是23px？  按理说应该都是10+5+8=23px啊？

还有就是为什么在body里面加overflow:hidden，不能清除浮动呢？在div里加overflow:hidden，就可以清除浮动。

<!DOCTYPE HTML>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">

    function req(){

          var div = document.getElementById("div1");

          document.getElementById("li1").innerHTML = (div.offsetTop)+"px";

          //div1距离屏幕顶部的距离

          document.getElementById("li2").innerHTML = (div.offsetLeft)+"px";

          //div1距离屏幕左部的距离

          document.getElementById("li3").innerHTML = (div.scrollTop)+"px";

          //div1纵向滚动条滚动的距离

          document.getElementById("li4").innerHTML = (div.scrollLeft)+"px";

          //div1横向滚动条滚动的距离

     }

</script>

</head>

<body >

<div style="border:10px solid #ccc;padding:0px 0px;margin:5px 5px;overflow:hidden;">

    <div style="width:60%;border-right:1px dashed red;float:left;">

        <div style="float:left;">

            <div id="div1" style="border:5px red solid;height:300px;width:200px;overflow:auto">

                <div style="height:500px;width:400px">请调整横竖滚动条后，点击按钮后查看offsetTop、offsetLeft、scrollTop、scrollLeft值。</div>

            </div>

            <input type="button" value="点击我!" onclick="req()" style="border: 1px solid purple;height: 25px;"/>

        </div>

        

    </div>

    <div style="width:30%;float:left;">

        <ul style="list-style-type: none; line-height:30px;">结果：

            <li>offsetTop : <span id="li1"></span></li>

            <li>offsetLeft : <span id="li2"></span></li>

            <li> scrollTop : <span id="li3"></span></li>

            <li>scrollLeft : <span id="li4"></span></li>

        </ul>

        

    </div>

</div>

    <!--<div style="clear:both;"></div>-->    

</body>

</html>


提问者：leoayon 2019-05-04 05:50

个回答

  • 走馬勿观花
    2020-03-23 18:14:39

    因为body没有 margin: 0; padding: 0;

    0
  • voiceee
    2019-09-29 19:38:36

    offsetTop和offsetLeft都是内容以外到边界的距离，border+margin+padding，也就是内边距加外边距加边框才是到内容的距离，加入代码

    <style type="text/css">

    *{

    margin:0;

    }

    </style>

    发现，这是body自带的margin外边距是 0 8px，也就是左右加了个8而上下没有加，上面的评论说明了，我只是详细的说下

    0
  • 盗梦空间开发者
    2019-05-29 17:04:02

    css的基础，水平方向相邻元素的外边距为“之和”；垂直方向相邻元素的外边距会发生重叠，取其中最大值（你可以试着把margin：5px 5px修改成10px 5px，然后再观察）。

    而且讨论这个没意义，那个8px是浏览器自带的，做项目都会重置样式。

    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css" rel="stylesheet">


    0