[CSS]关于盒模型

什么是盒模型？

CSS 盒模型本质上是一个盒子，盒模型主要由：外边距 margin、边框 border、内边距 padding、内容 content 组成，具体看下图

盒模型.png

盒模型的分类

盒模型分为标准盒模型和怪异盒模型

1. 标准盒模型

举个栗子来看

<div class="box"></div>

.box {
  width: 300px;
  height: 300px;
  background: #a4c639;
  border: 1px solid red;
  padding: 10px;
  margin: 20px;
}

box 最终的宽高是多少呢，看图可知是 322x322

标准盒模型图1.png

对应的盒模型

标准盒模型图2.png

2. 怪异盒模型

在ie8+浏览器中使用哪个盒模型可以由 box-sizing 控制，默认值为 content-box，即标准盒模型；如果将 box-sizing 设为 border-box 则用的是怪异盒模型
同样举个栗子

<div class="box"></div>

.box {
  width: 300px;
  height: 300px;
  background: #a4c639;
  border: 1px solid red;
  padding: 10px;
  margin: 20px;
  box-sizing: border-box
}

box 的宽高如图

怪异盒模型图1.png

对应的盒模型

怪异盒模型图2.png

总结

标准盒模型的大小等于：content + padding + border
怪异盒模型的大小等于：我们设置的 width、height