CSS盒模型宽度如何计算_width包含padding和border差异-css教程-PHP中文网

CSS盒模型宽度如何计算_width包含padding和border差异

P粉602998670

发布： 2025-12-04 14:39:10

原创

491人浏览过

标准盒模型（content-box）下width仅指内容宽度，总宽度需加上padding和border；设置box-sizing: border-box后，width包含padding和border，内容区自动压缩，布局更直观。

css盒模型宽度如何计算_width包含padding和border差异

在CSS中，盒模型的宽度计算方式直接影响元素的实际占用空间。默认情况下，元素的 width 只设置内容区域（content）的宽度，但实际占据的总宽度还受 padding 和 border 影响，除非更改盒模型行为。

这是默认的盒模型。当你设置 width: 200px; 时，这个值仅代表内容区域的宽度，不包括内边距和边框。

总占用宽度计算公式为：

总宽度 = width + padding-left + padding-right + border-left + border-right

例如：

实际总宽度 = 200 + 10×2 + 5×2 = 230px

通过设置 box-sizing: border-box; 可以改变盒模型的行为。此时，width 包含了 content、padding 和 border 的宽度。

在这种模式下：

6pen Art

AI绘画生成

213

例如：

此时内容区域实际可用宽度 = 200 - 20 - 10 = 170px，但整个盒子仍正好占 200px 宽。

现代开发中，很多开发者倾向于全局设置：

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

这样可以让布局更直观，特别是在使用百分比宽度或栅格系统时，避免因 padding 导致溢出容器的问题。

基本上就这些。理解两种模型的区别，能有效避免布局错位问题。

以上就是CSS盒模型宽度如何计算_width包含padding和border差异的详细内容，更多请关注php中文网其它相关文章！

大家都在看：