css3常见面试题之box-sizing:border-box|

话不多说，先上代码：

html代码

<div class="wrapper">
  <div class="container1">容器一</div>
<div class="container2">容器二</div>
<div>

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;
}

结果如下图：

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