width、clientWidth、offsetWidth、scrollWidth、getBoundingClientRect、getComputedStyle(dom).width区别

dom树尺寸

dom.style.width 读取dom树

cssom树尺寸

getComputedStyle(dom).width 读取cssom树 读出来精确的100px

布局数的尺寸

clientWidth

clientWidth 包括了元素的内边距（padding）和实际内容的宽度content

offsetWidth

offsetWidth 包括了元素的边框（border）、内边距（padding）、滚动条（scroll）、元素的实际内容的宽度content

scrollWidth

scrollWidth 包括了元素的实际内容的宽度visible+invisible，但不包括边框（border）、内边距（padding）和滚动条（如果有）

例如，如果一个元素的宽度为 300px，边框为 2px，内边距为 10px，内容实际宽度为 500px，没有垂直滚动条，那么它的 scrollWidth 就是 500px 

window.innerWidth

表示浏览器窗口的内部宽度，即浏览器可视区域的宽度，不包括滚动条的宽度。它可以通过 window.innerWidth 来获取

window.outerWidth

表示浏览器窗口的外部宽度，包括浏览器的边框和滚动条的宽度。它可以通过 window.outerWidth 来获取

真正的可见尺寸

getBoundingClientRect    包括transform:scale(2)