CSS盒模型，Box Model
阅读目录
在最初接触CSS的时候，对于CSS盒模型的不了解，撞了很多次的南墙呀。盒模型是网页布局的基础，它制定了元素如何在页面中显示，如果足够地掌握，那使用CSS布局那将会容易得多。
图1. 盒模型示意图
在最初接触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>