CSS的盒子模型

1.什么是盒子模型

 

    例子说明：

 

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

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

2.盒子取值计算

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

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

 

 

转载于:https://www.cnblogs.com/fujiayao/p/8835613.html