CSS盒模型（Box Model）

阅读目录

在最初接触CSS的时候，对于CSS盒模型的不了解，撞了很多次的南墙呀。盒模型是网页布局的基础，它制定了元素如何在页面中显示，如果足够地掌握，那使用CSS布局那将会容易得多。

图1. 盒模型示意图

<style>
  .content {background: #eee; height: auto;border: 1px solid blue;}
  .div {width: 100px;height: 100px;margin: 30px;padding: 10px;border: 5px solid blue;}
  .div-01 {background: orange;}
  .div-02 {background: yellow;box-sizing: border-box;}
</style>

<div class="content">
  <div class="div div-01">div01</div>
  <div class="div div-02">div02</div>
</div>