/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
#console{
  float: right;
  width: 200px;
  font-size: 15px;
}
#main{
  width: 500px;
  height: 1000px;
  background-color: blue;
  overflow: hidden;
}
#sub{
  margin: 5px 10px;
  padding: 3px  6px;
  border: 1px solid #eee;
  width: 50px;
  height: 50px;
  background-color: red;
}
</style>
</head>
<body>
  <div id="main">
    <div id="sub">
    </div>
  </div>
<script id="jsbin-javascript">
var sub = document.getElementById('sub');
console.log(sub.clientWidth);//元素的可见宽度(width+padding-left+padding-right)
console.log(sub.clientHeight);//元素的可见高度(height+padding-top+padding-bottom)
console.log(sub.clientTop);//(border-top)
console.log(sub.clientLeft);//(border-left)
console.log(sub.offsetWidth);//元素的高度(width+padding+border)
console.log(sub.offsetHeight);//元素的宽度(height+padding+border)
console.log(sub.offsetTop);//元素垂直偏移位置(相对浏览器的偏移)
console.log(sub.offsetLeft);//元素水平偏移位置(相对浏览器的偏移)
//console.log(sub.offsetParent);//元素偏移容器
console.log(sub.scrollWidth);//元素整体宽度=clientWidth
console.log(sub.scrollHeight);//元素整体高度=clientHeight
console.log(sub.scrollTop);//上边缘与视图之间距离
console.log(sub.scrollLeft);//左边缘与视图之间距离
</script>


<script id="jsbin-source-css" type="text/css">#console{
  float: right;
  width: 200px;
  font-size: 15px;
}
#main{
  width: 500px;
  height: 1000px;
  background-color: blue;
  overflow: hidden;
}
#sub{
  margin: 5px 10px;
  padding: 3px  6px;
  border: 1px solid #eee;
  width: 50px;
  height: 50px;
  background-color: red;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var sub = document.getElementById('sub');
console.log(sub.clientWidth);//元素的可见宽度(width+padding-left+padding-right)
console.log(sub.clientHeight);//元素的可见高度(height+padding-top+padding-bottom)
console.log(sub.clientTop);//(border-top)
console.log(sub.clientLeft);//(border-left)
console.log(sub.offsetWidth);//元素的高度(width+padding+border)
console.log(sub.offsetHeight);//元素的宽度(height+padding+border)
console.log(sub.offsetTop);//元素垂直偏移位置(相对浏览器的偏移)
console.log(sub.offsetLeft);//元素水平偏移位置(相对浏览器的偏移)
//console.log(sub.offsetParent);//元素偏移容器
console.log(sub.scrollWidth);//元素整体宽度=clientWidth
console.log(sub.scrollHeight);//元素整体高度=clientHeight
console.log(sub.scrollTop);//上边缘与视图之间距离
console.log(sub.scrollLeft);//左边缘与视图之间距离</script></body>
</html>

## jsbin.wemuho.css
#console{
  float: right;
  width: 200px;
  font-size: 15px;
}
#main{
  width: 500px;
  height: 1000px;
  background-color: blue;
  overflow: hidden;
}
#sub{
  margin: 5px 10px;
  padding: 3px  6px;
  border: 1px solid #eee;
  width: 50px;
  height: 50px;
  background-color: red;
}

## jsbin.wemuho.js
var sub = document.getElementById('sub');
console.log(sub.clientWidth);//元素的可见宽度(width+padding-left+padding-right)
console.log(sub.clientHeight);//元素的可见高度(height+padding-top+padding-bottom)
console.log(sub.clientTop);//(border-top)
console.log(sub.clientLeft);//(border-left)
console.log(sub.offsetWidth);//元素的高度(width+padding+border)
console.log(sub.offsetHeight);//元素的宽度(height+padding+border)
console.log(sub.offsetTop);//元素垂直偏移位置(相对浏览器的偏移)
console.log(sub.offsetLeft);//元素水平偏移位置(相对浏览器的偏移)
//console.log(sub.offsetParent);//元素偏移容器
console.log(sub.scrollWidth);//元素整体宽度=clientWidth
console.log(sub.scrollHeight);//元素整体高度=clientHeight
console.log(sub.scrollTop);//上边缘与视图之间距离
console.log(sub.scrollLeft);//左边缘与视图之间距离
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	#console{
	float: right;
	width: 200px;
	font-size: 15px;
	}
	#main{
	width: 500px;
	height: 1000px;
	background-color: blue;
	overflow: hidden;
	}
	#sub{
	margin: 5px 10px;
	padding: 3px 6px;
	border: 1px solid #eee;
	width: 50px;
	height: 50px;
	background-color: red;
	}
	</style>
	</head>
	<body>
	<div id="main">
	<div id="sub">
	</div>
	</div>
	<script id="jsbin-javascript">
	var sub = document.getElementById('sub');
	console.log(sub.clientWidth);//元素的可见宽度(width+padding-left+padding-right)
	console.log(sub.clientHeight);//元素的可见高度(height+padding-top+padding-bottom)
	console.log(sub.clientTop);//(border-top)
	console.log(sub.clientLeft);//(border-left)
	console.log(sub.offsetWidth);//元素的高度(width+padding+border)
	console.log(sub.offsetHeight);//元素的宽度(height+padding+border)
	console.log(sub.offsetTop);//元素垂直偏移位置(相对浏览器的偏移)
	console.log(sub.offsetLeft);//元素水平偏移位置(相对浏览器的偏移)
	//console.log(sub.offsetParent);//元素偏移容器
	console.log(sub.scrollWidth);//元素整体宽度=clientWidth
	console.log(sub.scrollHeight);//元素整体高度=clientHeight
	console.log(sub.scrollTop);//上边缘与视图之间距离
	console.log(sub.scrollLeft);//左边缘与视图之间距离
	</script>


	<script id="jsbin-source-css" type="text/css">#console{
	float: right;
	width: 200px;
	font-size: 15px;
	}
	#main{
	width: 500px;
	height: 1000px;
	background-color: blue;
	overflow: hidden;
	}
	#sub{
	margin: 5px 10px;
	padding: 3px 6px;
	border: 1px solid #eee;
	width: 50px;
	height: 50px;
	background-color: red;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">var sub = document.getElementById('sub');
	console.log(sub.clientWidth);//元素的可见宽度(width+padding-left+padding-right)
	console.log(sub.clientHeight);//元素的可见高度(height+padding-top+padding-bottom)
	console.log(sub.clientTop);//(border-top)
	console.log(sub.clientLeft);//(border-left)
	console.log(sub.offsetWidth);//元素的高度(width+padding+border)
	console.log(sub.offsetHeight);//元素的宽度(height+padding+border)
	console.log(sub.offsetTop);//元素垂直偏移位置(相对浏览器的偏移)
	console.log(sub.offsetLeft);//元素水平偏移位置(相对浏览器的偏移)
	//console.log(sub.offsetParent);//元素偏移容器
	console.log(sub.scrollWidth);//元素整体宽度=clientWidth
	console.log(sub.scrollHeight);//元素整体高度=clientHeight
	console.log(sub.scrollTop);//上边缘与视图之间距离
	console.log(sub.scrollLeft);//左边缘与视图之间距离</script></body>
	</html>