在找小项目练习时，自己的完成度不太好，就找别人的代码看，发现了box-sizing这个属性，遂在网上找了很多资料研究，自己再来整理一下加深印象。
以往认知中，盒模型的组成： content(内容) + margin + padding+ border 组成。
浏览器有两种盒模型：W3C下的标准模型和 IE下的传统模型（IE6以下，不包含IE6版本或”QuirksMode下IE5.5+”），这也就是CSS3中box-sizing中对应的属性值，content-box 和border-box，
- 标准盒子模型中（content-box），width和height是指内容区的宽高；
- IE盒子模型中（border-box），width和height是指content+padding+border的总宽高。
这种概念知识看了之后似乎觉得是会了，然而并没有这么简单，实际使用中会发现有些问题，还是需要实践来说明。
box-sizing: content-box（浏览器默认情况）
结构：
<div class="test">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>样式：
.test{
width: 28px;
height: 28px;
padding: 1px 1px;
border: 1px solid #000;
}
.test div{
width:7px;
height:7px;
padding: 2px;
border: 2px soild #ccc;
box-sizing: content-box;
}
.one{
background-color: red;
}
.two{
background-color: blue;
}
.three{
background-color: chocolate;
}其实浏览器的默认情况也就是box-sizing: content-box，
最终效果：
打开控制台可以看一下，style中最后的盒模型layout，左边的是外面整个div，右边的是里面的每一个div，
整个盒子的宽高 = content + padding + border = 28 + （1+1） + （1+1） = 32 px
盒子本身的宽度和高度是28px，但是会因为padding和border的添加，导致这个盒子的宽度和高度随之变大，所以上例中原本每个小盒子 div 的高度是7px，3一个堆一起是21px，远远小于大盒子的高度28px，原本是应该可以放得下的，但就是因为增加了每个小盒子的padding和border值，使得现在超过了外面的大盒子。
box-sizing: border-box情况
设置每一个小盒子div 的box-sizing: border-box，
最终效果：
控制台中看：
很惊奇的发现，content的宽高变成了3px，那CSS中设置的width ＆ height是content ＋ padding + border之总和，增添padding或者border，不会改变原先设置的总宽高，而是相应的减少content区域的宽高。
box-sizing：border-box应用
box-sizing：border-box主要用于：布局以及表单元素，表单中不同类型type的默认宽度不一致，可以通过border-box解决。在使用无序列表中，遇到一行上放等大的 li 时，只要添加了padding或者border时，容易往下排，右边一片空白，我们不得不调一下 li 的height和width，现在不用啦，通过box-sizing：border-box就可以直接解决了。
box-sizing：border-box的兼容性问题
box-sizing现代浏览器都支持，但IE家族只有IE8版本以上才支持，虽然现代浏览器支持box-sizing，但有些浏览器还是需要加上自己的前缀，Mozilla需要加上-moz-，Webkit内核需要加上-webkit-，Presto内核-o-,IE8-ms-，所以box-sizing兼容浏览器时需要加上各自的前缀。