理解box-sizing属性border-box,content-box
发布网友
发布时间：2022-11-18 21:29
共1个回答
热心网友
时间：2024-11-22 16:49
首先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
