如何理解盒模型及其content、padding、border、margin？

（1）背景介绍：

盒子模型的简介

盒子模型的英文名字是叫做box model,而且HTML也是一个盒子

自然就包括了div a span 都可以成为盒子的，盒子模型是分为这几个的

1 content（中心）2 padding（内边距）3 border（边框）4 margin（外边距）

盒子模型分为IE盒子模型和标准盒子模型

关于这五个属性

width(宽度)：内容中心的一个宽度

height(高度)：内容中心的一个高度

padding（内边距）：在边框和内容的一个中间地方，可以直接用padding属性来控制

border（边框）：在内边距和外边距之间的一个边框

margin（外边距）：在最外面的叫做外边距，可以控制margin来创建一个距离外边的一个空白

（2）知识剖析：

1. 盒子模型：

IE盒子模型和标准盒子模型的区别？

在 CSS的标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。

增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。

.每一个属性的四个部分

盒子模型边框部分，都有上，下，左，右这样的属性可以设置

（3）常见问题：

盒子模型为什么无法贴边？

（4）解决方案：

盒子模型的一个外边距margin是有一个默认的8px，只要在<body>那里进行设置成0就好了，margin：0；

（5）编码实战：

在一些网站中，都运用到了盒子模型，尤其是边框的设置方面，在边框的设置下，尤其是要把外边距变成0，这样的话有助于网站的美观

有的网站的一些东西是用了外边距来撑着的，还有保持居中等等，都是用到了盒子模型中的运用属性，盒子模型就像俄罗斯方块一样的。

一个一个的叠加在一起，生效，实现着各种各样的效果

（6）拓展思考：

border 边框要如何拆分

border是一个大综合属性。比如说：

border:1px solid red;

就是把4个边框，都设置为1px宽度、线型实线、red颜色。

（7）参考文献：

1：生命壹号博客

2：B站视频：盒子模型

（8）更多讨论：

1：问题：盒子模型的最终元素的总宽度计算公式是怎么样的呢？

回答：总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

2：问题：盒子模型的最终元素的总高度计算公式是怎么样的呢？

回答：总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距