图解说明令人困惑的box-sizing: border-box； content-box；

一、box-sizing的文字说明

box-sizing：是用来更改 CSS盒模型中的这种计算元素宽高的一种方法

默认值：box-sizing: content-box; 设置元素width: 100px，则元素净内容区宽度为100px，不包含该元素的左右padding值、左右border值

实际开发中用的比较多的值：box-sizing: border-box; ，设置元素width: 100px，则元素整个宽度为100px，包含了padding值、包含了左右border值，其中真正能使用的内容区域宽度为 100px - 左右padding - 左右border = 真正的内容宽度

温馨提示：以下有图解说明👇

二、box-sizing: content-box;

注意：box-sizing默认值为content-box

三、box-sizing: border-box;

注意：box-sizing修改为border-box后，元素明显小了很多，元素的宽高计算发生了变化

四、思考题

提问：橙色块的宽高分别是多少？

<style>
  .box {
    width: 10px;
    height: 10px;
    border: 1px solid #000;
    padding: 2px;
    margin: 2px;
    background-color: orange;
  }

  .content-box {
    box-sizing: content-box;
  }

  .border-box {
    box-sizing: border-box;
  }
</style>
<div id="box1" class="box content-box"></div>
<div id="box2"  class="box border-box"></div>

先思考，再看答案，答案在下方👇
~
~
~
~
~
~
~
~
~
~
~
~
~
~
~
~
~
~
~
~
~
~
~
~
~
~
~
box1为14px、box2为8px