CSSbox-sizing盒模型详解

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《CSS box-sizing 改变盒模型计算方式，主要通过设置不同的值来影响元素的宽度和高度计算方式。以下是详细的解释：1. 默认值：content-box这是 CSS 的默认盒模型（即标准盒模型）。在这种模式下，元素的 width 和 height 属性仅应用于内容区域（content area），不包括边框（border）和内边距（padding）。示例：.box { width: 200px; padding: 20px; border: 10px solid black; }内容区域宽度为 200px。实际占用的总宽度 = 200px（内容） + 20px（左 padding） + 20px（右 padding） + 10px（左 border） + 10px（右 border） = 260px。2. 新值：border-box使用 box-sizing: border-box; 后，元素的 width 和 height 属性将包括内容、内边距和边框。这意味着你设置的宽度和高度是整个盒子（包括内容、padding 和 border）的总大小。示例： .box { width: 200px; padding: 20》，聊聊，希望可以帮助到正在努力赚钱的你。

box-sizing属性可改变CSS盒模型计算方式，默认content-box下宽高仅含内容，padding和border额外增加总尺寸；使用border-box后，宽高包含内容、内边距和边框，使布局更直观可控。通过全局设置, ::before, *::after { box-sizing: border-box; }可统一所有元素的盒模型，避免布局错位，提升开发效率。

默认情况下，CSS 的盒模型将元素的宽度（width）和高度（height）仅应用于内容区域，而内边距（padding）、边框（border）和外边距（margin）会额外增加总尺寸。这在布局时容易导致计算复杂。box-sizing 属性可以改变这种计算方式，让开发者更直观地控制元素的实际大小。

box-sizing: content-box（默认值）

这是浏览器默认的盒模型：

• 设置的 width 和 height 只包括内容区域
• padding 和 border 会增加在 width/height 之外
• 总宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

box-sizing: border-box

使用 border-box 后，元素的 width 和 height 包含了内容、内边距和边框：

• 设置的 width 和 height 是元素最终占据的总宽高
• padding 和 border 将在 width/height 内部“压缩”内容区域
• 总宽度 = 设置的 width（已包含 padding 和 border）+ 左右 margin

如何使用 box-sizing 统一布局

为了简化页面布局，很多开发者会在全局重置 box-sizing：

*, *::before, *::after {
  box-sizing: border-box;
}

这样所有元素都采用 border-box 模型，避免意外溢出或错位，尤其在栅格布局、弹性盒子中更加可控。

终于介绍完啦！小伙伴们，这篇关于《CSSbox-sizing盒模型详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！