CSS的盒子模型

1.什么是盒子模型

 

    例子说明：

 

        上图中，红色边框为手机的外包装盒，而且外包装盒有一定的厚度(border)， 为了保
护手机在运送的过程中不被磕坏，我们在盒子里面四周填充了一层泡沫， 并且泡沫也有一定
的厚度(padding)，这层泡沫将手机包裹住， 手机就是整个盒子的核心内容(content)。

可以这么对比记忆：
手机------>>>内容(content)
泡沫------>>>padding
包装盒---->>>boder
外包装间距-->>>margin

2.盒子取值计算

        我们在修改页面元素位置的时候， 需要设定它相对于盒子的位置， 那么我们有必要清楚
关于盒子模型里面的取值相关问题。
        在 CSS 中， width 和 height 指的是内容区域的宽度和高度。 增加内边距、边框和外边
距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。 而默认情况下，内边距、边框和
外边距的值均为 0.
        占据页面大小的区域是整个元素框的总尺寸！ 默认情况， padding、 margin、 border
均为 0，假如我们设定了区域内容的 width 和 height，那么此时整个元素框的总尺寸就是
该区域内容的宽高了，此时，如果设定了 margin 值，那么整个元素框的总尺寸会发生变化
(变大了)， 但是我们希望它的整体布局不发生变化！所有我们可以修改区域内容的尺寸(原
有大小减去设定的 margin 值)。

图解说明盒子模型取值问题