盒子模型

# 盒子模型

标准盒子：box-sizing: current-box. 盒子真实宽/高：margin + border + padding + content

.currentBox {
  display: inline-block;
  width: 200px;
  height: 200px;
  border: 1px solid red;
  padding: 10px;
  margin: 20px;
  background: yellow
}

1
2
3
4
5
6
7
8
9

此时盒子真实的宽度/高度：40 + 2 + 20 + 200 = 262px

width: 262px; background: red; height: 262px

怪异盒子：box-sizing: border-box. 盒子真实宽/高：margin + content. content是css中盒子写的width/height，包括了border、padding

.currentBox {
  display: inline-block;
  box-sizing: border-box;
  width: 200px;
  height: 200px;
  border: 1px solid red;
  padding: 10px;
  margin: 20px;
  background: yellow
}

1
2
3
4
5
6
7
8
9
10

此时盒子真实的宽度/高度：40 + 200 = 240px

width: 240px;height: 240px; background: red;

# 总结

盒子模型分为标准盒子模型，box-sizing: current-box; 怪异盒子模型，box-sizing: border-box

标准盒子的真实宽/高：margin + border + padding + content 怪异盒子的真实宽/高：margin + content. content 包括 padding和border

编辑

上次更新: 2025/07/20, 08:30:18

← JS底层水平垂直居中→