Saber2pr's Blog

盒子模型

标准(w3c)盒模型

width = content (元素宽度 = 内容宽度)

以 content 为边界

内容宽度不变，向外扩展

.contentBox {
  background-color: aquamarine;
  width: 100px;
  height: 100px;
  box-sizing: content-box;
  border: 10px solid blue;
  padding: 20px;
  margin: 20px;
}

所以.contentBox 元素的宽度为 100px

怪异(IE)盒模型

width = content + padding + border (元素宽度 = 内容宽度 + 内边距宽度 + 边框宽)

以 border 为边界

设置 padding 和 border 会挤压内容

.borderBox {
  background-color: yellowgreen;
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  border: 10px solid blue;
  padding: 20px;
  margin: 20px;
}

所以.borderBox 元素的宽度为 100px + 20px + 10px = 130px

border-box 应用

在 input 元素中经常需要设置 padding，但设置之后 input 就会在垂直方向上与 input:submit 按钮无法对齐，方法就是设置输入框 border-box，这样排版时，padding 就会计算到元素实际宽度中。