昨天写了clientWidth,明天趁热打铁，把offsetWidth也学习一下。

先看一下mdn是怎么解释的：

HTMLElement.offsetWidth 是一个只读属性，返回一个元素的布局宽度。一个典型的（译者注：各浏览器的offsetWidth可能有所不同）offsetWidth是测量蕴含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值。

能够看出与clientWidth统一的是，它也是属性，并且是只读的。包含了border，padding，竖直方向上的滚动条（如果有的话），以及css设置的宽度（width）。

同样先来看一个例子：

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      #box {        width: 200px;        height: 200px;        padding: 20px;        margin: 20px;        border: solid 10px black;      }    </style>  </head>  <body>    <div id="box">content</div>  </body>  <script>    var box = document.getElementById('box');    console.log(box.offsetWidth);  </script></html>

这时offsetWidth为260。把box-sizing设置成border-box,再次察看

这时offsetWidth为200,又到了总结的时候

  1. 相较于clientWidth，offsetWidth包含了border，滚动条。
  2. content-box下为width + 左右padding + 左右border+滚动条（如果有）
  3. border-box下为css设置的width