css box-sizing 使用场景

1、content-box:此值为其默认值，其让元素维持W3C的标准Box Model，也就是说元素的宽度/高度（width/height）等于元素边框宽度（border）加上元素内边距（padding）加上元素内容宽度/高度（content width/height）即：Element Width/Height = border+padding+content width/height。

2、border-box:此值让元素维持IE传统的Box Model（IE6以下版本），也就是说元素的宽度/高度等于元素内容的宽度/高度。（从上面Box Model介绍可知，我们这里的content width/height包含了元素的border,padding,内容的width/height【此处的内容宽度/高度=width/height-border-padding】）。

使用场景：

---

如果你的网页有两块区域刚好等于网页区域时候，这个时候没有任何关系。

但是当你需要给你的元素加上border或者padding 时候就会发生悲剧，没错，被顶下去了 贴图：

这个时候如果使用border-sizing border-box 就会完美避开这个问题，简直布局神器。

---

表单使用方面：
不同的表单元素在不同的浏览器上的大小是很难控制的。在不同的浏览器都有不同的border和padding，这个时候可以用border-box统一样式是特别方便的！
内容参考：戳这里=>