box-sizing,你的宽高度计算对了吗?
我们都知道CSS
盒模型分为IE盒模型和W3C标准盒模型,它们的计算方式和一个CSS
属性有关box-sizing
。
![a4a843d7abaf0d879993a2f63d856b40 image.png](http://cdn.pic1.54php.cn/20191117/a4a843d7abaf0d879993a2f63d856b40.png?imageView/2/w/600)
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; } 复制代码
在浏览器具体表现为
![1acab1d671ffcdb8c54a7c05f9efd2b9 image.png](http://cdn.pic1.54php.cn/20191117/1acab1d671ffcdb8c54a7c05f9efd2b9.png?imageView/2/w/600)
border-box
当我们设置成border-box
.demo2 { box-sizing: border-box; width: 200px; height: 200px; padding: 20px; margin: 10px; border: 5px solid #ccc; } 复制代码
在浏览器具体表现为
元素宽高计算
当我们去掉元素的宽高度时
![6bae7a335a06b0d67fd13a14158ddafd image.png](http://cdn.pic1.54php.cn/20191117/6bae7a335a06b0d67fd13a14158ddafd.png?imageView/2/w/600)
去掉元素的内外边距时
当我们去掉元素padding
,border
时可以看出元素的宽高度是在变化的,而去掉margin
值时,元素的宽高没有变化。
所以我们的元素的宽高度值计算只和padding
,border
,元素的content
有关
width = padding + border + content height = padding + border + content 复制代码
总结
content-box
在宽度和高度之外绘制元素的内边距和边框border-box
在宽度和高度之内绘制元素的内边距和边框元素的宽高和
margin
无关,与padding
,border
,元素的content
有关当
box-sizing
属性值为content-box
时,元素的宽高等于:width + padding + border
;当
box-sizing
属性值为border-box
时,元素的宽高等于元素设置的width
和height
作者:Mondo
链接:https://juejin.im/post/5ce3c9e751882533411b1fdd
![编程浪子走四方:CodeRonin](http://cdn.static.54php.cn/images/weixin/m_coreronin.png?w=300)