答案：CSS盒模型由content、padding、border、margin组成，标准模型宽高不包含padding和border，IE模型（box-sizing: border-box）则包含，推荐使用border-box以便更直观控制布局。
在CSS中，元素的总宽高由盒模型决定。理解盒模型的组成和计算方式，能准确控制页面布局。
盒模型的组成部分
一个元素的实际占用空间包括以下四个部分：
- 内容区域（content）：实际内容的宽高，由 width 和 height 设置
- 内边距（padding）：内容与边框之间的空间
- 边框（border）：元素的边框线，包含宽度、样式和颜色
- 外边距（margin）：元素与其他元素之间的距离
标准盒模型下的宽高计算
默认情况下，CSS使用标准盒模型（box-sizing: content-box）。此时设置的 width 和 height 只表示内容区域大小，不包含padding和border。
总宽度计算公式为：
立即学习“前端免费学习笔记（深入）”；
总宽度 = width + 左右padding + 左右border + 左右margin总高度计算公式为：
总高度 = height + 上下padding + 上下border + 上下margin例如：
div {
width: 200px;
height: 100px;
padding: 10px;
border: 5px solid #000;
margin: 20px;
}
该div的总宽度为：200 + 10×2 + 5×2 + 20×2 = 270px
总高度为：100 + 10×2 + 5×2 + 20×2 = 170px
IE盒模型（替代盒模型）
当设置 box-sizing: border-box 时，元素进入IE盒模型模式。此时 width 和 height 包含了内容、padding 和 border，但不包含 margin。
在这种模式下：
- 你设置的 width = 内容宽 + 左右padding + 左右border
- 总宽度 = width + 左右margin
- 总高度 = height + 上下margin
这种方式更直观，推荐在项目中全局设置：
* {
box-sizing: border-box;
}
如何选择合适的盒模型
多数现代开发中建议使用 border-box，原因如下：
- 设定的宽高就是视觉上的尺寸，更容易控制布局
- 添加padding或border不会意外撑大元素
- 响应式设计中表现更稳定
只要记住：margin 始终不参与 width/height 的定义，它是在最外层额外增加的空间。
基本上就这些。关键在于明确当前元素的 box-sizing 属性值，然后按规则累加即可准确计算出元素在页面中占据的实际空间。
