![4f17f25457d353ae158f412b3233f7c8.png](https://img-blog.csdnimg.cn/img_convert/4f17f25457d353ae158f412b3233f7c8.png)
我们都知道CSS
盒模型分为IE盒模型和W3C标准盒模型,它们的计算方式和一个CSS
属性有关box-sizing
。
![cdda81b2fe9045a2bbfcdc9edcc277d6.png](https://img-blog.csdnimg.cn/img_convert/cdda81b2fe9045a2bbfcdc9edcc277d6.png)
box-sizing属性值
content-box | border-box 默认值:content-box
content-box
当我们对元素设置content-box
.demo1 { box-sizing: content-box; width: 200px; height: 200px; padding: 20px; margin: 10px; border: 5px solid #333; }
在浏览器具体表现为
![9f53ab5228586a8eed4325fb362a4f6b.png](https://img-blog.csdnimg.cn/img_convert/9f53ab5228586a8eed4325fb362a4f6b.png)
border-box
当我们设置成border-box
.demo2 { box-sizing: border-box; width: 200px; height: 200px; padding: 20px; margin: 10px; border: 5px solid #ccc; }
在浏览器具体表现为
![71ac64f85700e861d4578e20ccd169eb.png](https://img-blog.csdnimg.cn/img_convert/71ac64f85700e861d4578e20ccd169eb.png)
元素宽高计算
当我们去掉元素的宽高度时
![9d913ce3aabe2a677fcaad41c9cf2b8b.gif](https://img-blog.csdnimg.cn/img_convert/9d913ce3aabe2a677fcaad41c9cf2b8b.gif)
去掉元素的内外边距时
![cc884807aa4ee98314654296fa0a2fd7.gif](https://img-blog.csdnimg.cn/img_convert/cc884807aa4ee98314654296fa0a2fd7.gif)
当我们去掉元素padding
,border
时可以看出元素的宽高度是在变化的,而去掉margin
值时,元素的宽高没有变化。
所以我们的元素的宽高度值计算只和padding
,border
,元素的content
有关
width = padding + border + content height = padding + border + content
具体demo请查看
总结
content-box
在宽度和高度之外绘制元素的内边距和边框border-box
在宽度和高度之内绘制元素的内边距和边框- 元素的宽高和
margin
无关,与padding
,border
,元素的content
有关 - 当
box-sizing
属性值为content-box
时,元素的宽高等于:width + padding + border
; - 当
box-sizing
属性值为border-box
时,元素的宽高等于元素设置的width
和height