# box-sizing,你的宽高度计算对了吗?

我们都知道CSS盒模型分为IE盒模型W3C标准盒模型,它们的计算方式和一个CSS属性有关box-sizing

1hYvH1.gif (opens new window)

# 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;
}
1
2
3
4
5
6
7
8

在浏览器具体表现为 1hYXu9.png (opens new window)

# border-box

当我们设置成border-box

.demo2 {
  box-sizing: border-box;
  width: 200px;
  height: 200px;
  padding: 20px;
  margin: 10px;
  border: 5px solid #ccc;
}
1
2
3
4
5
6
7
8

在浏览器具体表现为 1hYjBR.png (opens new window)

# 元素宽高计算

当我们去掉元素的宽高度时

1htDKJ.gif (opens new window)

去掉元素的内外边距时

1htw2F.gif (opens new window)

当我们去掉元素paddingborder时可以看出元素的宽高度是在变化的,而去掉margin值时,元素的宽高没有变化。

所以我们的元素的宽高度值计算只和paddingborder,元素的content有关

width = padding + border + content
height = padding + border + content
1
2

具体demo (opens new window)请查看

# 总结

  • content-box在宽度和高度之外绘制元素的内边距和边框

  • border-box在宽度和高度之内绘制元素的内边距和边框

  • 元素的宽高和margin无关,与paddingborder,元素的content有关

更新于: 2/10/2020, 11:14:21 AM