一、CSS概述
- 盒子模型是CSS的基石之一，它指定元素如何显示以及（在某种程度上）如何相互交互
- 页面上的每个元素都被浏览器看成是一个矩形的盒子，这个盒子由元素的内容、填充、边框和边界组成。
- 网页就是由许多个盒子通过不同的排列方式（上下排列，并列排列，嵌套排列）堆积而成。
二、盒子模型
- 每个HTML元素都可以看作是一个装了东西的盒子
- 盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其它盒子之间，还有边界(magin).
- 如图所示
- 默认情况下盒子的边框是无，背景色是透明，所以我们在默认情况下看不到盒子
三、元素盒子大小计算
一个元素实际宽度=左边界＋左边框＋左填充＋内容宽度＋右填充＋右边框＋右边界
