css3常见面试题之box-sizing:border-box|content-box|inherit的区别

话不多说，先上代码：

html代码

  
容器一
容器二

css代码

.wrapper{
  float: left;
width: 100%;
height: 300px;
background-color: blue;//加背景色便于区分
}
.container1,.container2{
width: 100px;
height: 100px;
margin: 10px;
padding: 20px;
background-color: red;
border: 1px solid pink;
}
.container1{
  box-sizing: border-box;
}
.container2{
  box-sizing: content-box;
}

结果如下图：

result.png

box-sizing的默认值是box-content，符合标准的盒模型。
box-sizing:content-box;在宽度和高度之外绘制元素的内边距和边框。
box-sizing:border-box;通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度.