元素总宽高由内容、内边距、边框和外边距组成，box-sizing属性决定宽高是否包含内边距和边框：content-box为默认值，宽高仅含内容；border-box则包含内容、内边距和边框。通过offsetWidth/Height可获取含border的尺寸，getBoundingClientRect()可得含margin的视觉尺寸。建议全局设置box-sizing: border-box，使尺寸计算更直观，便于布局控制。

要准确计算一个元素的总宽度和总高度，需要考虑内容尺寸、内边距（padding）、边框（border）和外边距（margin）。css 提供了 box-sizing 属性来影响宽度和高度的计算方式，理解这一点是关键。

1. 元素总宽高的组成

一个元素在页面中实际占用的空间由以下几部分构成：

• 内容区域（content）：设置的 width 和 height
• 内边距（padding）：元素内部的空白区域
• 边框（border）：围绕内容和 padding 的边线
• 外边距（margin）：元素与其他元素之间的间距

因此，元素占据的总空间为：

总宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
总高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

2. box-sizing 的影响

CSS 中 box-sizing 属性决定了 width 和 height 是否包含 padding 和 border：

立即学习“前端免费学习笔记（深入）”；

• box-sizing: content-box（默认值）
  width 和 height 只包含内容区域，不包括 padding 和 border
• box-sizing: border-box
  width 和 height 包含内容、padding 和 border，但不包括 margin

例如：

 .example {   width: 200px;   padding: 20px;   border: 5px solid #000;   box-sizing: content-box; /* 默认 */ } 

此时实际内容宽度为 200px，总宽度为：
200 + 20×2 + 5×2 = 250px

如果改为：

百度·度咔剪辑

度咔剪辑，百度旗下独立视频剪辑App

3

查看详情

 .example {   width: 200px;   padding: 20px;   border: 5px solid #000;   box-sizing: border-box; } 

则内容区域会被压缩，总宽度仍为 200px（包含 padding 和 border）

3. 获取实际尺寸的方法（JavaScript）

若需通过代码获取元素总宽高，可使用以下 dom 方法：

• offsetWidth / offsetHeight：包含 content + padding + border（不包括 margin）
• clientWidth / clientHeight：包含 content + padding（不包括 border 和滚动条）
• getBoundingClientRect()：返回元素相对于视口的位置和尺寸，包含所有视觉占用空间，适合计算布局

示例：

 const el = document.querySelector('.example'); console.log('总宽度（含 border）:', el.offsetWidth); console.log('总高度（含 margin）:', el.getBoundingClientRect().height); 

4. 实际应用建议

为了更直观地控制布局，推荐在全局设置：

 *, *::before, *::after {   box-sizing: border-box; } 

这样设置后，指定的 width 和 height 更符合直觉，便于计算和响应式设计。

基本上就这些。掌握 box-sizing 和各盒模型组成部分，就能准确预估和测量元素的实际尺寸。

以上就是如何用