前端 —— JavaScript 基础篇 16 offset 、client、 sroll 系列总结

最近学习了一下JS中常用到的坐标系列 offset、scroll、client三大系列

offset()  

     offset(): 方法返回匹配元素相对于文档的偏移（位置）。 换个说法就是：匹配元素距离最近的 有定位的父级元素 的 偏移位置
     offsetTop  offsetLeft
            对象距离左边的距离，距离顶部的距离的具体值。
     offsetWidth  offsetHeight
            获取实际宽度 ： width + 左右padding + 左右border
            获取实际高度： height + 上下padding + 上下border
     offsetParent
            获取最近的 带有定位的父级元素

来看【实例】：

<style type="text/css">
		.div01{
			width: 500px;
			height: 500px;
			background: #FFF0F5;
			padding: 30px;
		}
		.first{
			width: 300px;
			height: 300px;
			background: #DB7093;
			margin: 100px;
			padding: 40px 0 0 0;
			position: relative;
		}
		.second{
			width: 200px;
			height: 210px;
			background: #8B008B;
			padding: 10px;
			margin: 0px 0 0 20px;