width=100%和width=auto(默认值)的区别

• width=100%表示content占100%，如果有padding和margin，那么总width将超过父容器，而width=auto表示总width不会超过100%，参考这里。

table宽度的计算

• 在默认情况下， table-layout=auto，表示column的宽度将由浏览器根据column的实际内容计算，此时如果设置table的width:100%，那么各个column的宽度将根据原实际内容按比例增加。
• 如果设置table-layout:fixed，那么在默认情况下，各个column的宽度将相等；而如果设置了table中第一个td的宽度（比如px或者%），那么这将是该td所占column的宽度，其他column再按等宽处理。

flexbox

• 一个flexbox自动变为block元素，一个display: inline-flex自动变为inline元素。

offsetHeight vs clientHeight vs scrollHeight

• offsetHeight包含可见content，padding，scrollBar和border，不包含margin
• clientHeight包含可见content和padding，不包含scrollBar，border和margin
• scrollHeight包含所有的content和padding，不包含srollBar，border和margin

pageX/clientX/offsetX/screenX

• pageX表示鼠标相对整个页面x轴的px值，滚动量包含在内
• clientX表示鼠标到可视区域的x轴的px值，滚动对此无影响
• offsetX表示鼠标相对于所点击元素的原点的x轴的px值，滚动量包含在内
• screenX表示相对于整个屏幕的x轴的px值
• 对于有父子关系的元素来说，offsetX总是返回的是触发事件的px值，即如果点击了子元素则返回的是鼠标离子元素原点的值，如果此时需要返回鼠标在父元素中的offsetX，则应该使用父元素的clientX - e.getCurrentTarget(). getBoundingClientRect().left

getBoundingClientRect包含哪些

• 当box-sizing:content-box，getBoundingClientRect只包含content，而不包含padding，border和margin；
• 当box-sizing:border-box，getBoundingClientRect包含content，padding和border，但不包含margin。