C1：DOM元素大小和位置

DOM元素大小和位置DOM元素大小DOM.offsetWidth/offsetHeight：包括内容区域宽/高，padding，border，不包括margin。如果元素的box-sizing是border-box，那么此时设置的style.width/style.height就是元素的offsetWidth/offsetHeight。即等于内容区域的宽/高+padding+border+scrollbar。DOM.clientWidth/clientHeight：包括内容区域宽/高，padding，不包括border和margin。在box-sizing:border-box的情况下，它等于style.width/height-边框的宽度。这里还有一个转换方法：clientWidth/clientHeight=offsetWidth/height-border-滚动条的宽度/高度beyond元素，不包括边框。它是clientWidth/clientHeight加上其子元素的宽度/高度。box-sizing:border-box也是如此。值得注意的是，DOM子元素超出部分的计算与DOM溢出的值略有不同。如下：绿框的宽高为100px，padding：20px；box-sizing：content-box包含一个高度为200px的红色框。当绿框的overflow为默认值时，绿框的scrollHeight=topmargin20px+红框的Height=220px当绿框的overflow属性为auto、scroll、hidden中的任意一项时，其scrollHeight=topmargin+bottommargin+红框高度=20+20+200=240pxDOM.style.width/style.height：返回style属性中的宽高。这两个值根据box-sizing的值代表不同的范围。使用DOM.style.width/height这个方法只能获取内联样式，不能获取CSS样式中的属性值。更多时候，我们可能需要的是这个方法：window.getComputedStyle(DOM)返回一个DOM元素计算后的样式对象。当box-sizing:content-box时，style.width/height=offsetWidth/height-滚动条的宽度/高度-border-内边距。当box-sizing:border-box时，style.width/height等于offsetWidth/offsetHeightandsizeclientHeight和clientWidth总是等于viewport-滚动条的宽度/高度（移动端除了），不管box-sizing的值如何。的尺寸计算方式与普通DOM元素相同。Element.getBoundingClientRect()返回一个DOMRect对象，其中包含四个属性的框架集合：left、top、width和height。left和top相对于视口的左上角。如果元素滚动，left和top值也会改变。宽度/高度是元素的盒模型（边框+填充+内容+滚动条）的计算宽度和高度。这同样适用于html和body。DOM元素的位置使用element.getBoundingClientRect()我们可以获得元素相对于视口的位置。还有另一种方法可以使用element.offsetTop和element.offsetLeft属性获取元素相对于其最近定位的祖先的位置。这里还有一个可以获取相对于根元素的元素（一般根元素指的是viewport），根据element.offsetParent向上查找，直到element.offsetParent==null。html和body的offsetParent都是null.letcurrent=element.offsetParentlettop=element.offsetTopwhile(current){top=current.offsetTopcurrent=current.offsetParent}值得注意的是element.offsetTop/offsetLeft的计算是element从元素的外边框到其包含元素的内边框的距离。所以严格来说，border的宽度应该根据情况加上。但是边框一般不会很大，最多1px2px，所以可以忽略。点击事件中鼠标指针的位置在PC端，移动端点击事件中的mouseEvent会包含如下信息：e.clientX/e.clientY：返回鼠标指针相对于浏览器窗口的客户区。e.pageX/e.pageY：返回鼠标指针相对于整个文档的坐标。当浏览器没有滚动条时，该值与e.clientX/e.clientY相同。但是当有滚动条时，这个值会比e.clientX/e.clientY大。e.screenX/e.screenY返回鼠标指针相对于整个屏幕的坐标。即使此时你的浏览器被你缩小并移到了角落，它的计算基数还是物理屏幕的左上角。e.offsetX/e.offsetY返回鼠标指针相对于e.target的坐标，与e.currentTarget不同。由于事件冒泡，当底层元素点击事件冒泡到顶层时，顶层事件处理器中事件对象中的offsetX/offsetY仍然是相对于最初触发的底层元素。如果祖先元素有translate和scale，好像是取值不正确。..换个方式获取，e.clientX,e.clientY配合element.getBoundingClientRect()函数getOffset(e){lettarget=e.currentTargetletrect=target.getBoundingClientRect()return{x:e.clientX-rect.left,y:e.clientY-rect.top}}这样无论其祖先元素是否设置了transform，在点击时都可以获得鼠标指针位置相对于e.currentTarget的相对坐标。移动端触摸事件中位置的一些有用信息我们也可以从移动端触摸事件中得到很多类似的信息，这些信息保存在e.touches的触摸对象中。touch.screenX/touch.screenY：返回相对于屏幕边缘的坐标。touch.clientX/touch.clientY：返回相对于视口边缘的坐标。touch.pageX/touch.pageY：返回相对于文档边缘的坐标。和clientX/clientY的区别和上面类似。应该说这三个值在移动端往往是相等的。