> 内容来源于双越老师课程（[一天时间迅速准备前端面试快速构建初级前端知识体系](https://coding.imooc.com/learn/list/400.html)）。而我，只是按照自己的理解与思维习惯，在这做一个记录，希望自己能够时时温故而知新。 # 问题请问如下代码中，div1 的 offsetWidth 是多大？ ```html

``` 答案：122 # 盒子模型盒模型从内到外，包含内容（`content`）、内边距（`padding`）、边框（`border`）、外边距（`margin`）四个部分，内容又分为高（`height`）、宽（`width`）。 ## 标准盒子模型 `width` 只包含内容宽度，不包含 `padding`、`border`、`margin`，`height` 同理。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/df6d07d96b3c439da9f006083e2027ec~tplv-k3u1fbpfcp-watermark.image?) ## IE怪异盒子模型 `width` 包含内容宽度、`padding`、`border`，仅不包含 `margin`，`height` 同理。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3abb440829134299b98fec964ad07277~tplv-k3u1fbpfcp-watermark.image?) # box-sizing 属性 [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) 中的 `box-sizing` 属性定义了 [user agent](https://developer.mozilla.org/zh-CN/docs/Glossary/User_agent) 应该如何计算一个元素的总宽度和总高度。语法：`box-sizing: content-box|border-box|inherit;` 默认值 `content-box` - `content-box`：与标准盒子模型表现一致 - `border-box`：与IE怪异盒子模型表现一致 - `inherit`：规定应从父元素继承 `box-sizing` 属性的值 # width、clientWidth、offsetWidth、scrollWidth 区别 - `style.width`：内容宽度，不包含内边距、边框、外边距。获取到的值是有单位的。 - `clientWidth`：内容宽度 + 内边距，不包括边框、外边距。 - `offsetWidth`：内容宽度 + 内边距 + 边框，不包括外边距。 - `scrollWidth`：内容宽度 + 内边距 + 溢出尺寸，不包括边框、外边距。无溢出的情况下，与 `clientWidth` 相同。上述问题中，这4项值分别为： ```html

``` # 问题补充上述问题中，在不修改 width、padding、border、margin 前提下，如果想让 offsetWidth 等于100，该怎么做？答案：设置 css 样式：`box-sizing: border-box;` 此时，`width` 包含内容宽度、`padding`、`border`，内容宽度即 100 - 1 - 1 - 10 - 10 = 78 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b79e4f6abf874c64acc5e62beb610dc7~tplv-k3u1fbpfcp-watermark.image?)