CSS盒模型宽度是否包含padding和border？

有志者，事竟成！如果你在学习文章，那么本文《CSS盒模型宽度计算详解：width包含padding和border吗？》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

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

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

标准盒模型（content-box）

总占用宽度计算公式为：

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

例如：

• width: 200px
• padding: 10px
• border: 5px solid #000

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

替代盒模型（border-box）

在这种模式下：

• 你设置的 width 值就是元素最终占据的总宽度（前提是不包含 margin）
• padding 和 border 的值会从内容区域“向内挤压”

例如：

• box-sizing: border-box;
• width: 200px;
• padding: 10px;
• border: 5px solid #000;

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

如何选择盒模型

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

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

总结关键差异

• 默认（content-box）：width 仅为内容宽度，总宽需手动加 padding 和 border
• border-box：width 是包含 padding 和 border 的总宽度，内容区自动缩小
• box-sizing 属性是控制这一行为的关键

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

以上就是《CSS盒模型宽度是否包含padding和border？》的详细内容，更多关于CSS盒模型,宽度计算的资料请关注golang学习网公众号！