CSS盒模型如何控制内容区域大小_content width与padding border
box-sizing 属性决定 width 是否包含 padding 和 border：content-box 时 width 仅指内容区，总宽度需加上 padding 和 border；border-box 时 width 包含三者，内容区自动调整。推荐全局设置 * { box-sizing: border-box } 以提升布局控制精度，避免意外溢出。
在CSS盒模型中，元素的总宽度不仅由内容区域（content）决定，还包括内边距（padding）、边框（border）和外边距（margin）。控制内容区域大小的关键在于理解 box-sizing 属性的作用，以及 width、padding 和 border 之间的关系。
默认盒模型：content-box
默认情况下，元素使用 box-sizing: content-box。此时你设置的 width 只作用于内容区域，不包含 padding 和 border。例如：div {
width: 200px;
padding: 20px;
border: 5px solid #000;
}该 div 的实际占用宽度为：- 内容宽度：200px
- 左右 padding：20px × 2 = 40px
- 左右 border：5px × 2 = 10px
- 总宽度 = 200 + 40 + 10 = 250px
更可控的盒模型：border-box
使用 box-sizing: border-box 可以让设定的 width 包含 content、padding 和 border。例如：div {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px soli
d #000;
}此时：
d #000;
}- 总宽度固定为 200px
- padding 和 border 从这 200px 中“扣除”
- 实际内容区域宽度 = 200 - 40 - 10 = 150px
如何选择合适的盒模型
推荐在项目开始时统一设置：* {
box-sizing: border-box;
}这样所有元素都采用 border-box 模型，避免因 padding 或 border 导致溢出容器的问题。之后你可以更直观地设定元素尺寸，无需手动计算额外空间。总结
content width 是否包含 padding 和 border，取决于 box-sizing 的值：- content-box：width 仅指内容区，总宽 = width + padding + border
- border-box：width 包含 content + padding + border，内容区自动压缩
