盒模型 && box-sizing

盒模型
盒模型是有两种标准的，一个是标准模型，一个是IE模型（ie8以下的版本中）。
在标准模型中，盒模型的宽高只是内容（content）的宽高
在IE模型中，盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高

css如何设置两种模型
box-sizing: content-box|border-box
content-box 标准模型
在宽度和高度之外绘制元素的内边距和边框
eg:width=内容区宽度（默认值）

border-box IE模型
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
eg:width=内容区宽度+padding宽度+border宽度
Demo

 .contentBox{
      box-sizing: content-box;
      background-color: green;
  }
 .borderBox{
     box-sizing: border-box;
     background-color: blue;
 }
 div{
     width: 200px;
     height: 200px;
     border:5px solid red;
     padding:10px;
     color: #ffffff;
 }
<div class="borderBox"> box-sizing: border-box;</div>
 <br>
 <br>
<div class="contentBox">box-sizing: content-box;</div>

效果如下：

image.png

border-box

image.png
content-box
image.png