盒模型之content-box和border-box的区别

总结一下content-box和border-box的区别，因为今天碰到这个问题给搞蒙了，看了很多帖子说content-box不包含padding和border；自己写了个盒子测试了一下.box {width: 200px;height: 200px;padding: 10px;margin: 20px;border: 5px solid red;background-color: cadetbl

一路向前的阿迪

2666人浏览 · 2022-01-03 18:27:29

一路向前的阿迪 · 2022-01-03 18:27:29 发布

总结一下content-box和border-box的区别，因为今天碰到这个问题给搞蒙了，看了很多帖子说content-box不包含padding和border；自己写了个盒子测试了一下

   .box {
      width: 200px;
      height: 200px;
      padding: 10px;
      margin: 20px;
      border: 5px solid red;
      background-color: cadetblue;
      /* content-box
      宽：200  高：200  padding：10  border：5px  合计大小230 */
      /* box-sizing: content-box; */
      box-sizing: border-box;
      /* border-box
      宽：170  高：170  padding：10  border：5px  合计大小200  */
    }

border-box 的效果图200px

在这里插入图片描述

content-box 效果图230px

在这里插入图片描述

做了测试更蒙了，这content-box最后大小不就是230px，不是包含了padding和border吗？最后又看了一些相关的博客，终于明白了！我理解的包含是把宽高计算在总大小内，而真正的理解是：“windt”，“width”，“width”，是你自己写的width在计算总盒子大小的时候不把padding和border计算在内winth内，就是要另外在加上padding和border；理解上出现了偏差。

content-box计算公式：winth=width+padding+border

CSS3中的box-sizing 属性允许以特定的方式来指定盒模型，有两种方式：

content-box：标准盒模型，又叫做 W3C盒模型，一般在现代浏览器中使用的都是这个盒模型

border-box：怪异盒模型，低版本IE浏览器中的盒模型

语法格式

box-sizing：content-box | border-box

区别

content-box：padding和border不被包含在定义的width和height之内。

盒子的实际宽度=设置的width+padding+border

border-box：padding和border被包含在定义的width和height之内。

盒子的实际宽度=设置的width（padding和border不会影响实际宽度，有效果，但不计算大小）

总结

我们在理解的时候就要记住content-box是正常盒模型，border-box是怪异盒模型；
content-box正常的盒子模型：width+padding+border，盒子内所有属性相加得到最终盒子大小；
border-box怪异盒模型，就是你写个width：200px；后面无论padding和border你写多少，最终盒子宽度就200px，不会变大，不会加上padding和border的大小；也就是width包含了padding和border。