CSS盒模型讲解我们来聊一聊CSS的盒模型，首先看这段代码这部分代码很简单，我们设置一个100像素背景色为蓝色的正方形

视频地址：点此查看

我们来聊一聊CSS的盒模型，首先看这段代码

<div class="box"></div>

.box{
  width: 100px;
  height: 100px;
  background-color: blue;
  border: 1px solid #000;
  padding: 10px;
}

这部分代码很简单，我们设置一个100像素背景色为蓝色的正方形盒子，他有1像素的边框，10像素的内边距，效果是这样的

但是我们通过查看控制台发现，盒子变成了122像素的正方形

这是因为我们设置的宽高是盒子内容的宽高，而盒子本身的宽高除了内容还有边框和内边距，通过控制台我们可以找到这个盒子的组成部分

显然与我们的本意不符，我们需要实现的是一个100像素的正方形盒子，在其内部有10像素的内边距和1像素的边框，接下来我们通过改变盒子的类型实现这个需求

.box{
  width: 100px;
  height: 100px;
  background-color: blue;
  border: 1px solid #000;
  padding: 10px;
  box-sizing: border-box;
}

这个时候我们就发现盒子大小就是我们设置的100像素，而盒子的内容区域则是实际大小减去边框和内边距。

大多数浏览器默认的盒模型就是第一种盒模型，也就是标准盒模型，这种盒模型需要我们计算内容区域，当我们需要设置盒子大小的时候，应该用我们实际大小减去边框大小减去内边距大小，这种当需求不断变更，样式不断修改，会引起很多的不便

但我们的IE浏览器默认的盒模型与标准盒模型不同，也就是我们的IE盒模型，业内也称之为怪异盒模型，你对盒子设置的尺寸大小就是盒子本身的实际大小，这种方式大大方便了我们的工作

最后我们总结一下两种盒模型的计算公式