box-sizing用于控制元素宽高计算方式，content-box（默认）宽高不包含padding和border，实际尺寸会更大；border-box则包含padding和border，确保设置的宽高即总占用空间。当元素宽100%加padding时，content-box会导致溢出，而border-box可避免此问题。推荐全局设置*{box-sizing:border-box}以统一模型，使布局更可控、 predictable。
在CSS中，box-sizing 属性用于控制元素的盒模型计算方式，它决定了 width 和 height 是包含内容、内边距（padding）和边框（border），还是仅指内容区域。正确使用 box-sizing 能避免布局中的尺寸计算问题。
box-sizing 的取值
box-sizing 有两个常用值：
content-box：默认值。width 和 height 只包括内容区域，不包含 padding 和 border。实际占用空间 = width/height + padding + border border-box：width 和 height 包括内容、padding 和 border。设置后，元素的总宽高不会因为 padding 或 border 而变大。
使用 box-sizing 解决布局问题
常见问题：给一个宽度为100%的元素添加 padding 后，实际宽度超过父容器。
例如：
立即学习“前端免费学习笔记（深入）”；
.box { width: 100%; padding: 20px; border: 5px solid #ccc;}
使用 content-box 时，这个元素的实际宽度是 100% + 40px (左右padding) + 10px (左右border)，会溢出父容器。
Waymark
Waymark是一个视频制作工具，帮助企业快速轻松地制作高影响力的广告。
79 查看详情
解决方法：使用 border-box
.box { box-sizing: border-box; width: 100%; padding: 20px; border: 5px solid #ccc;}
此时 width: 100% 已包含 padding 和 border，内容区域会自动压缩，整体不会超出父容器。
推荐全局设置
为避免每个元素都要单独设置，建议在 CSS 重置或初始化样式中统一应用：
*,*::before,*::after { box-sizing: border-box;}
这样所有元素都采用 border-box 模型，布局更直观可控。
基本上就这些。合理使用 box-sizing 能让页面布局更 predictable，减少意外的溢出或错位问题。
以上就是在css中如何用box-sizing控制盒模型的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1003759.html
微信扫一扫 
支付宝扫一扫 
