前言总结：盒模型、BFC、IFC、marginmerging等概念和问题的总结Damonare个人博客是学习之道，不先于拙劣的理论；理论差的关键一定要先阅读。文本CSS盒模型是CSS基础的基础。我之前对这方面的理解是否有偏差？由于涉及到的知识点比较多，所以写一个总结备忘录。本来打算两周更新一次博文，结果时间都花在刷题上了。我在leetcode上做了很多关于算法数据结构的题，记录在了github里，但其实我也在更新~只是对之前的一些博文的复习。纠错:)?最近秋招在即，压力倍增。前几天把博客导入页面的本科三年级改成了本科四年级。不禁感慨时光飞逝。一转眼，我的这个小窝已经快一年了。当我第一次建立这个网站时，我想找个地方谈谈。有些人可能不喜欢说话，只喜欢写（比如我）。但是，自从实习以来，我实在是提不起精神来写。遇到的一些坑，不想单独写博客记录。这里还是想保持纯正，就是把难点总结一下，理解一下。其他的一般都托管在github库中记录。闲话不说，先来说说今天的主角吧？??CSS盒子模型大家都很熟悉了，但是为了保证文章的完整性还是想先介绍一下。?盒模型CSS盒模型：在一个文档中，每个元素被抽象成一个盒，每个盒包括四部分（从内到外）：内容、填充、边框（border）、外边距（margin）。见上图，是从二维的角度来分析的。让我们来一张三维图：?这张图非常形象地解释了CSS盒子的组成：contentbox：三维盒子的核心paddingbox：内边距区域padding区域延伸到周围的padding边框。如果内容区域设置了背景、颜色或图片，这些样式会被扩展到padding（当然我们可以通过background-clip来设置作用区域）borderbox：由border和4个borderedge组成。如果borderwidth设置为0，则border边缘与padding边缘重叠；marginbox：由margin和4个marginedges组成。如果边距宽度设置为0，则边距边缘与边框边缘重叠。?看起来很复杂……用PS层的概念来更好地理解这块。最上面的是contentbox，接下来的是paddingbox，borderbox，marginbox。那么盒子模型一般分为两种：IE盒子模型所谓IE盒子模型，就是以前的IE浏览器实现的一种奇怪的盒子模型。这有多奇怪？当我们这样设置时：div{width:100px;height:100px;}理论上我们要设置的是内容框的宽高，但是IE在解析的时候会按照这个规则来解析：width=content-width+padding-width+border-widthheight=content-height+padding-height+border-height这样就导致了这种尴尬的情况：如果下面没有内容，直接点这里？
