在网页开发中，CSS内联样式是写在HTML元素style属性里的样式规则。它和类选择器、ID选择器一样，都会参与盒子模型的计算，决定元素最终的尺寸与位置。不少开发者误以为内联样式只改颜色或字体，实际上它可以直接设置width、height、padding、border和margin，从而改变整个盒子的结构。
盒子模型的基本组成
标准CSS盒子模型将每个元素视为一个矩形盒子，由内到外分别是内容区（content）、内边距（padding）、边框（border）和外边距（margin）。在默认box-sizing为content-box时，设置width只代表内容区宽度，实际占位还要加上padding和border。
内联样式如何写入盒子属性
通过style属性添加的内联样式拥有较高优先级，下面的例子展示了一个div用内联样式定义盒子参数：
<div style="width:200px; padding:20px; border:5px solid #333; margin:10px;"> 这是一个盒子 </div>
以上代码中，内容区宽200px，左右内边距共40px，左右边框共10px，所以该元素在页面中占用的总宽度为250px，外边距不计入自身占位但影响外部间距。
box-sizing改变计算规则
如果使用box-sizing:border-box，那么width将包含content、padding和border。内联样式同样可以设置此属性：
<div style="box-sizing:border-box; width:200px; padding:20px; border:5px solid #333;"> 边框盒模型 </div>
此时元素总宽度固定为200px，内容区被压缩为150px。可见内联样式对盒子模型的控制力与普通样式表一致。
常见排查建议
- 检查元素是否写了内联padding或border导致宽度超预期
- 使用浏览器审查工具查看computed里的盒模型图示
- 统一项目的box-sizing策略，减少布局冲突
小结
内联样式绝不是只能做细微修饰，它会完整参与盒子模型计算。明确这一点，才能在调试布局时快速定位由style属性引发的尺寸问题。