clientWidth、scrollWidth与offsetWidth的区别详解

clientWidth、scrollWidth与offsetWidth这三种经常会混淆，举例解释这三种宽度

1、没有滚动条的情况

 #boxWrap {
        width: 300px;
        height: 300px;
        background: pink;
        overflow: auto;
    }

    #box1 {
        width: 200px;
        height: 200px;
        background: gray;
        margin: 0 auto;
        padding: 10px;
        border: 5px solid #ccc;
        box-sizing: content-box;
    }
<div id="boxWrap">
    <div id="box1">this is the box </div>
    </div>
<script type="text/javascript">
var clientWidth=document.getElementById("box1").clientWidth;//220     clientWidth=content+padding
var scrollWidth=document.getElementById("box1").scrollWidth;//220     clientWidth=content+padding
var offsetWidth=document.getElementById("box1").offsetWidth;//230     clientWidth=content+padding+border
alert(clientWidth + " , " + scrollWidth + " , " + offsetWidth)
</script>

上面没有滚动条的情况下clientWidth:220   scrollWidth:220    offsetWidth:230

2、含有滚动条的情况

（1）对于里面的box（box2）

#boxWrap {
        width: 300px;
        padding:10px;
        border:1px solid #ccc;
        height: 300px;
        background: pink;
        overflow: auto;
        box-sizing: content-box;
    }

   
    #box2 {
        width: 400px;
        height: 400px;
        background: gray;
        margin: 0 auto;
        padding: 10px;
        border: 5px solid #ccc;
        box-sizing: content-box;
    }

<div id="boxWrap">
      <div id="box2">this is another box </div>
</div>
<script type="text/javascript">
var clientWidth2 = document.getElementById("boxWrap").clientWidth; //420     clientWidth=content+padding
var scrollWidth2 = document.getElementById("boxWrap").scrollWidth; //420     clientWidth=content+padding
var offsetWidth2 = document.getElementById("boxWrap").offsetWidth; //430     clientWidth=content+padding+border
alert(clientWidth2 + " , " + scrollWidth2 + " , " + offsetWidth2) 
</script>

在有滚动条时对于里面的box来说是跟没有滚动条是一样的

（2）对于外面的box（boxWrap）

<script type="text/javascript">
var clientWidth3 = document.getElementById("boxWrap").clientWidth; //303  clientWidth=content+padding
var scrollWidth3 = document.getElementById("boxWrap").scrollWidth; //440     clientWidth=content+padding
var offsetWidth3 = document.getElementById("boxWrap").offsetWidth; //322     clientWidth=content+padding+border
alert(clientWidth3 + " , " + scrollWidth3 + " , " + offsetWidth3)
</script>

外面的box受到里面box的影响，如果里面的box比较大，会有滚动条，

外面box的clientWidth= content+padding-滚动条的宽度（大概是17px）

外面box的scrollWidth=里面box的总宽度（里面box的content+padding+border）+外面box一边的padding

外面box的offsetWidth=外面box自身的content+padding+border