摘要：前言总括对于盒子模型，，和外边距合并等概念和问题的总结原文地址从盒子模型说起知乎专栏前端进击者博主博客地址的个人博客为学之道，莫先于穷理穷理之要，必先于读书。
前言
总括： 对于盒子模型，BFC，IFC和外边距合并等概念和问题的总结
原文地址：从CSS盒子模型说起
知乎专栏：前端进击者
博主博客地址：Damonare的个人博客
为学之道，莫先于穷理；穷理之要，必先于读书。
正文 CSS盒子模型是CSS基础中的基础，个人之前对于这块的理解有偏差?，由于涉及知识点比较多所以写一篇总结备忘。
之前打算的是两周一次更新博文的，但是时间用在了刷题上，做了很多leetcode上算法数据结构的题记录在github，但其实也有在更新啦~只不过是对之前的一些博文进行纠正:)?
最近秋招在即，压力倍增，前几天把博客导入页的在读大三本科生改为了在读大四本科生，不禁心生感慨，时光荏苒。转眼间我的这个小窝竟然已经快一年了。当初建立这个站点也是想找个说话的地方，有的人可能就是不喜欢说，只喜欢写(比如我)，然而自从实习后确实提不起精神来写了，一是没精力，二是对于遇到的一些坑不想多带带写一篇博客记录。这里还是想保持一份纯净，就是以总结和理解难点为主调 其它的一般会托管在github库里记录一下。闲话不多说，说说今天的主角?♀️
CSS盒子模型想来都不陌生，但还是想先介绍一下，以保证文章的完整性。?
盒子模型 CSS盒子模型：
在一个文档中，每一个元素都被抽象成一个盒子，每一个盒子又包括四部分(从内到外):内容(content)，内填充(padding)，边框(border)，外边距(margin)。见上图，这是从二维的角度分析，来张三维立体图：?
此图很形象的解释了CSS盒子的构成：
content box：立体盒子的核心
padding box：内边距区域padding area 延伸到包围padding的边框。如果内容区域content area设置了背景、颜色或者图片，这些样式将会延伸到padding上(当然我们可以通过background-clip设置作用区域)
border box：由border和4条border edge组成。若border宽度设置为0，则border edge与padding edage重叠；
margin box：由margin和4条margin edge组成。若margin宽度设置为0，则margin edge与border edage重叠。
?看起来很复杂的样子...
拿PS图层的概念更好理解这块，最上面的就是content box往下一次是padding box,border box,margin box。
那么盒子模型一般分为两种：
IE盒子模型所谓IE盒子模型，就是之前IE浏览器实现的一种怪异的盒子模型，怎么怪异呢？当我们这样设置的时候:
div {
width: 100px;
height: 100px;
}
理论上我们想要设置的就是content box的宽高嘛，但是IE在解析的时候会按照这个规则解析：
width = content-width + padding-width + border-width
height = content-height + padding-height + border-height
这就导致了这种尴尬的境地:下面无内容的话直接戳这里?