理解box-sizing属性border-box，content-box
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了理解box-sizing属性border-box，content-box相关的知识，希望对你有一定的参考价值。
参考技术A 对于盒子模型的理解首先W3C的解释
1、box-sizing：content-box的时候：
这是由 CSS2.1 规定的宽度高度行为。
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。
2、box-sizing：border-box的时候：
为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
通过图更直观的对比：
图一是box-sizing：content-box的时候：
这个时候盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。
例如一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px，假如 box-sizing：content-box 盒子模型解释，那么这个盒子需要占据的位置为：宽 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的实际大小为：宽 1*2+10*2+200=222px、高 1*2+10*2+50=72px
图二是box-sizing：border-box的时候：
从上图可以看到 ie 盒子模型的范围也包括 margin、border、padding、content，和 box-sizing：content-box 盒子模型不同的是：该 盒子模型的 content 部分包含了 border 和 pading。
例如一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px，假如 box-sizing： border-box 盒子模型解释，那么这个盒子需要占据的位置为：那么这个盒子需要占据的位置为：宽 20*2+200=240px、高 20*2+50=70px，盒子的实际大小为：宽 200px、高 50px
box-sizing的相关属性
box-sizing有三个属性，分别是：content-box，border-box,inherit
(1)content-box:在宽度和高度之外绘制元素的内边距和边框（默认属性）
（2）border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制
（3）inherit:规定从父级元素继承box-sizing属性的值
以上是关于理解box-sizing属性border-box，content-box的主要内容，如果未能解决你的问题，请参考以下文章
* { box-sizing: border-box; } 的作用