css中2种盒模型和计算方式

CSS中有两种盒模型：标准盒模型（content-Box）和IE盒模型（border-Box）。

标准盒模型的计算方式是：元素的宽度和高度只包括内容（content），不包括边框（border）和内边距（padding）。如下图所示：

  .Box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 2px solid black;
  }

在上述代码中，元素的实际宽度 = 200 + 20*2 + 2*2 = 244px，元素的实际高度 = 100 + 20*2 + 2*2 = 144px。

IE盒模型的计算方式是：元素的宽度和高度包括内容（content）、边框（border）和内边距（padding）。如下图所示：

  .Box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 2px solid black;
    Box-sizing: border-Box;
  }

在上述代码中，元素的实际宽度 = 200px，元素的实际高度 = 100px，因为设置了Box-sizing属性为border-Box。