CSS盒模型由content、padding、border、margin组成，总宽=width+左右padding+左右border+左右margin；标准模型width仅含content，IE模型（box-sizing:border-box）width包含content、padding和border，推荐使用后者以便布局控制。
CSS盒模型是网页布局的核心概念之一，理解它对掌握页面元素的尺寸计算和排版至关重要。每个HTML元素都可以看作是一个矩形盒子，这个“盒子”由四个部分组成：内容（content）、内边距（padding）、边框（border）和外边距（margin）。
1. 盒模型的四个组成部分
Content（内容区）：显示文本、图片等内容的区域，其大小由 width 和 height 决定。
Padding（内边距）：内容与边框之间的空间，背景色会延伸到 padding 区域。设置 padding 会影响盒子总尺寸。
Border（边框）：围绕在 padding 外的一条边线，可以设置宽度、样式和颜色。
立即学习“前端免费学习笔记（深入）”；
Margin（外边距）：盒子与其他元素之间的空白区域，不包含背景色，用于控制元素间的距离。
一个元素的总宽度计算公式为：
总宽度 = width + 左右padding + 左右border + 左右margin
同理，总高度 = height + 上下padding + 上下border + 上下margin
2. 标准盒模型 vs 怪异盒模型（IE盒模型）
CSS中有两种盒模型：标准盒模型和怪异盒模型（也称IE盒模型）。
Seede AI
AI 驱动的设计工具
586 查看详情
标准盒模型（content-box）：默认情况下使用。你设置的 width 和 height 只包括 content 区域，padding、border 和 margin 额外增加。
例如：width: 200px; padding: 10px; border: 5px solid black; 实际占用宽度为：200 + 2×10 + 2×5 = 230px。
怪异盒模型（border-box）：通过 box-sizing: border-box; 设置。此时 width 和 height 包含了 content、padding 和 border，padding 和 border 不再额外增加总尺寸。
例如：同样设置 width: 200px; padding: 10px; border: 5px solid black; box-sizing: border-box;，实际 content 宽度会自动调整为 180px（200 – 2×10 – 2×5），总宽仍为200px。
推荐在项目中统一使用 box-sizing: border-box;，这样更便于控制布局尺寸。
3. 常见操作与注意事项
合理使用盒模型属性能有效控制页面结构：
用 margin 控制元素之间的间距，支持负值，可实现重叠效果。margin: 0 auto; 可实现块级元素水平居中（需指定 width）。相邻垂直方向的 margin 会发生合并（margin collapse），取较大者。padding 不可为负值，会影响点击区域（如按钮）。border 可以透明或隐藏，不影响 layout 占位。
4. 如何查看盒模型？
使用浏览器开发者工具（F12），选中元素后，在“Computed”或“Box Model”面板中，可以直观看到 content、padding、border、margin 的具体数值和布局分布。
基本上就这些。掌握盒模型原理，能帮你准确预测元素在页面中的实际大小和位置，避免布局错乱。关键是理解 box-sizing 的作用，并养成检查元素尺寸的习惯。
以上就是css盒模型基础知识详解的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1063691.html
微信扫一扫 
支付宝扫一扫 
