代码！ doctypehtmlhtmllang=' zh _ cn ' style.outer { width 3360100 px； height: 100px； 后台： yellow； padding:10px； margin:15px； border :5 px固态黑； Overflow :自动； /* box-sizing: border-box； *.inner{Height336020px； 边框-底部33601 pxsolidsilver； }/stylebodydivclass=' outer ' id=' outer ' divclass=' inner '/divdivclass=' inner '/divdivclass divdivclass=' inner '/divdivclass=' inner '/divdivclass=' inner '/divdivclass=' inner bass outer ) ) console.log )、clientwidth: )、outer.clientWidth、) Wien twidth console.log (offsetwidth 3360、outer.outer console.log(scrollwidth:outer.scrollWidth，)横向无溢出时为clientWidth )； console.log('clientheight: '，outer.clientHeight，' height 3360100 px padding 336010 px *2' )； //如果有横向滚动条，则减去滚动条的宽度。 例如，overflow是scroll console.log (offsetheight : )、outer.offsetHeight、) height 3360100 px padding 33666660 console.log ) height :20 px * 10 padding 336010 px *2border-bottom 3360110//border-box//console.log (clientwidth : (，outer //console.log(offsetwidth:outer.offsetWidth、) width: 100px )； //console.log(scrollwidth:outer.scrollWidth，)横向无溢出时为clientWidth )； //console.log (clientheight :outer.clientHeight、' height 3360100 px-border 33605 px *2' )； //如果有横向滚动条，则减去滚动条的宽度。 例如，overflow可以是scroll//console.log (' offsetheight : )、outer.offsetHeight、' height: 100px ' )； //console.log (scrollheight : (，outer.scrollHeight，() ) (height 336020 px border-bottom 33601 px ) 10 padding 3360 height: 100px； border: 5px； padding: 10px； margin: 15px；
盒装： content-box； (填充/边框在指定的宽度之外绘制。)
盒尺寸： border-box； (填充/边框在width中绘制)
总结clientHeight/clientWidth计算元素中可用区的高度、宽度。 (图中黄色部分，包含填充，不超出元素部分进行计算) (滚动条的宽度因环境而异) ) offsetHeight/offsetWidth将元素整体占用的高度、宽度设定为如果scrollHeight/scrollWidth内容(margin部分除外)为溢出，则计算元素中的子节点总高度和宽度。 否则，它将与clientheight/clieent相同。附件：如果在window.innerHeight/innerWidth浏览器的可见区域的高度、宽度计算中存在错误/补充，请指出更改。