CSS盒模型由content、padding、border、margin组成，总宽=width+左右padding+左右border+左右margin；使用box-sizing:border-box可将padding和border包含在宽高中，避免布局溢出，推荐全局设置*{box-sizing:border-box}以统一行为。
CSS盒模型是网页布局的核心概念之一，每个HTML元素都可以看作是一个矩形盒子。理解盒模型的结构和工作方式，是掌握页面排版和样式控制的基础。
盒模型的基本组成
每一个元素的盒模型由四个部分构成：内容区域（content）、内边距（padding）、边框（border）和外边距（margin）。
• content：盒子中的实际内容，比如文字、图片等，尺寸由 width 和 height 决定。
• padding：内容与边框之间的空间，背景色会延伸到 padding 区域。
• border：围绕内容和 padding 的边框线，可设置宽度、样式和颜色。
• margin：盒子与其他元素之间的空白区域，不包含背景，用于控制间距。
默认情况下，元素的总宽度计算公式为：
总宽度 = width + 左右padding + 左右border + 左右margin
立即学习“前端免费学习笔记（深入）”；
总高度同理。
box-sizing 属性的使用
默认的盒模型行为有时会让布局变得难以控制，特别是当设置了 padding 或 border 后，元素的实际尺寸会超出预期。这时可以使用 box-sizing 属性来改变计算方式。
• content-box：默认值。width 和 height 只包含 content，padding 和 border 额外增加。
• border-box：width 和 height 包含 content、padding 和 border。更便于控制布局。
推荐在项目中统一设置：
Waymark
Waymark是一个视频制作工具，帮助企业快速轻松地制作高影响力的广告。
79 查看详情
*, *::before, *::after { box-sizing: border-box; }
这样所有元素都按 border-box 模式计算尺寸，避免意外溢出。
常见使用场景与技巧
合理运用盒模型可以简化布局设计。
• 使用 margin 实现水平居中：margin: 0 auto;（需配合固定宽度）。
• 利用负 margin 调整元素位置或重叠布局。
• 设置 padding 时注意不要让内容区被压缩，建议配合 box-sizing: border-box。
• 清除默认 margin 和 padding：body, ul, h1-h6 等标签常有默认值，可重置为 0。
实例演示
一个简单的 div 设置：
.box { width: 200px; height: 100px; padding: 20px; border: 5px solid #000; margin: 10px; box-sizing: border-box;}
此时该元素的总宽度仍为 200px（包含 padding 和 border），外层占用空间为 200px + 20px（左右 margin）= 220px。
如果不使用 border-box，则 content 宽度为 200px，加上 padding 和 border 后实际宽度变为 250px，容易导致布局错乱。
基本上就这些。掌握盒模型的关键在于理解各部分如何影响元素尺寸，以及灵活使用 box-sizing 来控制布局行为。
以上就是css盒模型基础详解与使用方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1032162.html
微信扫一扫 
支付宝扫一扫 
