scrollWidth：对象的实际内容宽度，不包括边线宽度，会随对象中内容超过可视区而变大。
clientWidth：对象内容的可视区的宽度，不包括边线宽度，会随对象显示大小的变化而变化。
offsetWidth：对象整体的实际宽度，包括边线宽度，会随对象显示大小的变化而变化。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outer {
100px;
height: 100px;
border: 50px solid red;
}
.inner{
400px;
height: 50px;
background: #000000;
}
</style>
</head>
<body>
<div class="outer" id="outer">
<div class="inner"></div>
</div>
<script>
var ele = document.getElementById('outer');
console.log('offsetWidth: ' + ele.offsetWidth);
console.log('scrollWidth: ' + ele.scrollWidth);
console.log('clientWidth: ' + ele.clientWidth);
</script>
</body>
</html>
