内联样式通过style属性设置盒子模型，包含content、padding、border、margin四部分；默认box-sizing: content-box下宽度为内容宽+内边距+边框，而box-sizing: border-box时宽度包含内容、内边距和边框，利于精确布局控制。
在HTML中直接使用style属性定义的CSS样式称为内联样式。当为一个元素设置内联样式时，盒子模型的相关属性（如宽高、内边距、外边距、边框等）会直接影响该元素的布局表现。
盒子模型的基本结构
每个HTML元素都可以看作一个矩形盒子，这个盒子由以下几个部分组成：
- content（内容区）：盒子的实际内容，比如文字、图片等
- padding（内边距）：内容到边框之间的空间
- border（边框）：围绕内容和内边距的边线
- margin（外边距）：盒子与其他元素之间的距离
使用内联样式设置盒子模型
通过style属性可以直接设置这些盒子模型的属性：
内容文本
上述代码中：
- 内容区域为200×100像素
- 每侧内边距20px，整体尺寸增加40px宽度和40px高度
- 每侧边框5px，再增加10px宽度和10px高度
- 外边距10px，影响与其他元素的间距
最终该元素占据的总宽度为：200 + 40 + 10 = 250px（默认box-sizing: content-box）
控制盒模型计算方式
可以使用box-sizing属性改变尺寸计算方式：
内容区会自动缩小以适应设定的总宽度
当box-sizing: border-box时，设置的width包含内容、内边距和边框，更便于布局控
制。
box-sizing的影响。
