在一个文档中，每个元素都被表示为一个矩形的盒子。就是常说的css盒模型

盒模型包含的有：

• margin（外边距）
• boder（边框）
• padding（内边距）
• 内容宽高

由于浏览器厂商原因，导致盒模型并不统一，常见的有两种：

普通盒模型

<div class="box">

.box {
    box-sizing: content-box; // chrome默认为普通盒模型
    width: 100px;
    height: 100px;
    margin: 10px;
    border: 10px solid #000;
    padding: 10px;
    background: blue;
}

普通盒模型

可以看到：

• 盒子的总宽度为：width+margin+padding+border = 100 + 10 + 10 + 10 = 130
• 盒子的总高度为：height+margin+padding+border = 100 + 10 + 10 + 10 = 130

怪异盒模型

<div class="box">

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

怪异盒模型

可以看到：

• 盒子的总宽度为：width = 100
• 盒子的总高度为：height = 100

看到这，我想你已经明白两种模型的区别了吧