JS盒模型示意图重绘，JavaScript中client、scroll、offset的区别

 

作为一个会写一点点html+css的射鸡师，常拉着前端攻城狮讨论要实现的效果，

发现当遇到需要获取布局尺寸时，很多同事关于JS的盒模型理解起来很吃力；

感觉用文字来解释会比较抽象，图片的方式会直观些；

 

个人对盒模型了解的不够完整，网上找了张当时使用率挺高的图来看，

虽然大致看明白了，但标示看起来比较混乱，

通过与同事的交流以及那张图为参考，最近抽空重绘了一张，希望给需要的朋友有所帮助。

 

若有误或表达不够到位的地方，欢迎大家指出