元素总宽高由内容、内边距、边框和外边距组成，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
如果改为：
.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 和各盒模型组成部分，就能准确预估和测量元素的实际尺寸。
