box-sizing:border-box

最新推荐文章于 2025-01-15 23:03:13 发布

原创最新推荐文章于 2025-01-15 23:03:13 发布 · 833 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了CSS中盒模型的两种类型：标准盒模型和border-box盒模型的区别。特别是border-box盒模型如何使元素的内边距(padding)和边框(border)计算方式更加直观和易于理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

box-sizing:border-box

一般盒模型设置width后，再设置padding和border都是在已设的width往盒模型外加的。
如width:100px;padding:10px;border:10px;则最后盒模型是占据120px空间的（不考虑margin）。
设置box-sizing:border-box后，盒模型的内边距和边框即往内侧添加。

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

参考地址