我们都知道CSS
盒模型分为IE盒模型和W3C标准盒模型,它们的计算方式和一个CSS
属性有关box-sizing
。
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;
}
复制代码
在浏览器具体表现为
border-box
当我们设置成border-box
.demo2 {
box-sizing: border-box;
width: 200px;
height: 200px;
padding: 20px;
margin: 10px;
border: 5px solid #ccc;
}
复制代码
在浏览器具体表现为
元素宽高计算
当我们去掉元素的宽高度时
去掉元素的内外边距时
当我们去掉元素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