css内联样式的盒子模型

内联样式通过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的影响。