19.盒模型

clientWidth、scrollWidth、offsetWidth

clientWidth：对象内容的可视区的宽度，不包滚动条，会随整个标签对象显示大小的变化而改变。 offsetWidth:表示该对象整体的实际宽度或高度，包括滚动条、边框、内边距，但不包括外边距 scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。

在 IE6 中 offsetWidth 没有包含 border

<script>
  var clientWidth = window.document.getElementById("parent").clientWidth;
  var offsetWidth = window.document.getElementById("parent").offsetWidth;
  var scrollWidth = window.document.getElementById("parent").scrollWidth;
  console.log(clientWidth);
  console.log(offsetWidth);
  console.log(scrollWidth);
</script>
<style>
  #parent {
    width: 200px;
    height: 200px;
    border: 10px solid black;
    padding: 10px;
    margin: 10px;
    overflow: auto;
  }

  #son {
    width: 300px;
    height: 300px;
  }
  /* 
    chrome浏览器滚动条默认宽度为15
    clientWidth: 205 = 185（实际width) + 20(padding) (即clientWidth 会被压缩)
    offsetWidth: 240 = 185（实际width) + 20(padding) + 20(border) + 15(scrollWidth)
    scrollWidth: 320 = clientWidth + 滚动条的距离
    CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关
    */
</style>