浅谈CSS盒模型

简单的来说一下在别人问你这个问题的时候怎么来回答它

前端新人，如有错误求大佬指出~求教💝

情景复现

大佬提问：“你知道CSS盒模型是什么吗？”

我的回答：“

        盒模型主要分为4部分：内容、外边距、内边距。Css3盒子模型可以通过box-sizing来改变。目前是有两种盒模型。

        第一种是w3c标准盒模型，默认也是content-box，也就是默认标准盒模型，标准盒模型width设置了内容的宽，所以盒子实际宽度是width=内容+padding+border。

        第二个就是ie盒模型也叫怪异盒模型或c3盒模型，通过设置box-sizing: border-box;盒模型为ie盒模型，也称怪异盒模型，设置width后，实际盒子的宽度就固定为该宽度，包含了内容+padding+border。ie盒模型主要表现在ie浏览器，当然其他浏览器也保留了ie盒模型的支持

”

第一种：w3c标准盒模型（默认）（box-sizing: content-box）

.box {
  height: 100px;
  width: 100px;
  padding: 10px;
  border: 10px solid #fff;
}

上述盒子的实际宽度是100px + 20px + 20px = 140px

第二种： ie盒模型也叫怪异盒模型或c3盒模型 （box-sizing: border-box）

.box {
  height: 100px;
  width: 100px;
  padding: 10px;
  border: 10px solid #fff;
  box-sizing: border-box;
}

上述盒子的实际宽度是（100px - 20px - 20px）+20px + 20px  = 100px