浏览器中的元素大小和滚动之滚动条部分实验性特性

引言:经常看到clientWidth,clientTop,scrollTop,这些玩意,对其是一知半解很是难受,写下这些文章的目的就是为了学习浏览器中的元素大小以及滚动.

  <div id="example">
      经常看到clientWidth,clientTop,scrollTop,这些玩意,对其是一知半解很是难受,写下这些文   章的目的就是为了学习浏览器中的元素大小以及滚动.
           经常看到clientWidth,clientTop,scrollTop,这些玩意,对其是一知半解很是难受,写下这些文   章的目的就是为了学习浏览器中的元素大小以及滚动.
  </div>
  <style>
      #example{
         width:300px;
         height:300px;
         border:25px solid red;
         padding:20px;
         overflow:auto;
    }
  
  </style>

在这里插入图片描述


这是火狐浏览器的运行结果,可以发现紫色部分是padding内容包含了scrollbar.

接下来的是chrome浏览器运行结果,可以发现scrollbar占用的是内容区域(content box)

综上所述,滚动条是占content区域还是padding区域是不确定的,因浏览器差异而变化

可以发现溢出的内容都会占用底部padding-bottom 不同之处在于chrome右边的也会占用padding-right

最终结论

1. 滚动条在不同的浏览器所使用的是content-box还是padding-box无法确定.
2. padding区域也是内容可以进行滚动浏览的地方