CSS3:盒子模型box-sizing

box-sizing:content-box(默认)/border-box/inherit

content-box：标准盒模型，CSS定义的宽高只包含content的宽高

border-box：IE盒模型，CSS定义的宽高包括了content，padding和border

inherit:继承其父元素的盒模型

说一个cvte的一个面试题：写一个四栏布局，然后每两个中间间隔为20px;
当时很紧张，想到了用flex,但是结果都不太理想，然后面试官给我写了一个方法，当时真的是很佩服，感觉虽然不难，但是人家考虑的很周到。大概代码是这个样子的

<div class="wrap">
  <div>DIV1</div>
  <div>DIV2</div>
  <div>DIV3</div>
  <div>DIV4</div>
  <div>DIV5</div>
</div>

<style type="text/css">
*{margin:0；padding:0;}
  .wrap{
  background-color:red;
  margin-right:-20px;
}
.wrap div{
  box-sizing:border-box;
  backgroud-color:green;
  width:25%;
  height:100px;
  border-right:20px;
}
</style>