一 window对象的innerWidth、outerWidth
innerWidth是可用区域的宽度（内容区 + 滚动条）
outerWidth是浏览器窗口的宽度（可用区域的宽度+审查元素区域的宽度）
二 HTMLELement对象的offsetWidth、clientWidth、width
width是纯内容区
clientWidth是纯内容区+补丁
offsetWidth是纯内容区+补丁+边框+滚动条
说明：
1 桌面版浏览器（chrome、Safari）的滚动条占用HTMLElement的宽度（会导致HTMLElement的宽度减少15px）
移动版浏览器（Chrome、Safari）的滚动条不占用HTMLELement的宽度
2 getBoundingClientRect().right-getBoundingClientRect().left与offsetWidth意义相同，但前者提供精确的小数，而offsetWidth是整数。
3 Framework框架的Dom7的outerWidth()实际上是offsetWidth+margin
三 示例代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"> <title>各种宽度</title> <style type="text/css"> *{margin:0;border: none;padding: 0;} .outer{ margin:9px; border:7px solid black; padding:3px; width:300px; height: 100px; overflow-y: auto; background-color: gray; } .inner{ height: 1000px;; } </style> <script> document.addEventListener('DOMContentLoaded',function(e){ // window的各种width console.log(`innerWidth : ${window.innerWidth} , outerWidth : ${window.outerWidth}`); // HTMLElement的各种width let outer = document.querySelector('#outer'); let styles = document.defaultView.getComputedStyle(outer,null); console.log(`offsetWidth : ${outer.offsetWidth} , clientWidth : ${outer.clientWidth}, width : ${outer.width}`); },false); </script> </head> <body> <div id="outer" class="outer"> <div class="inner"> </div> </div> <div id="box2" style="height:2000px;"></div> </body> </html>