盒模型

box = margin + border + padding + width/height

两种显示模式

1. content-box
   width = content
2. border-box
   width = content + padding + border

<!-- 不同盒模型下显示宽度相同 -->
<div class="div1"></div>
<div class="div2"></div>
.div1 {
  width: 100px;
  height: 100px;
  padding: 30px;
  margin: 20px;
  border: 20px solid red;
  background-color: #222;
}
.div2 {
  width: 200px;
  height: 200px;
  padding: 20px;
  margin: 20px;
  border: 20px solid red;
  background-color: #222;
  box-sizing: border-box;
}

box.png

切换盒模型显示模式

使用CSS中的box-sizing属性即可