序言
CSS盒子模型算是CSS中最重要的一部分，在开发中遇到难以理解的现象，往往是因为对模型的理解不够。 盒子模型主要有标准模型和IE模型，本文主要讲述：
- 标准模型基本概念
- 标准模型与IE模型的区别
- 边距重叠与BFC
- 其他
标准模型基本概念
标准模型「默认：box-sizing: content-box」由四部分组成，从内到外依次是：
- 内容区域「content」：可以放置元素的区域如文本，图像等，一般设置宽高度指的是这个内容的宽高；
- 内边距区域「padding」：内容与边框之间的距离
- 边框区域「border」：就是边框
- 外边距区域「margin」：由外边边距限制，用空白区域扩展边框区域，来分开相邻的元素。
标准模型与IE模型的区别
标准模型指的是设置box-sizing为content-box的盒子模型，一般width，height 指的是content的宽高。 而IE模型指的是box-sizing为border-box的盒子模型。宽高的计算是content+padding+border；
边距重叠与BFC
外边重叠三种情况：
- 相邻元素之间
- 父元素与其第一个或最后一个字元素之间
- 空的块级元素
BFC
BFC的定义：见MDN
BFC的作用：
- 让浮动内容与周围内容等高 当浮动内容溢出容器的时候，创建容器的BFC，来包裹这个浮动。
- 外边距蹦陷 当外边距被合并时，创建各自的BFC，来解决问题 父元素与第一个元素上边距合并，创建父元素与第一个元素的各自的BFC
其他
包含块的影响
当我们设置元素的一些属性，譬如：width、height、padding、margin、定位的偏移值「top，left」，常常受到起包含块的影响。
谁是你的包含块
- position 属性为static，relative 包含块为最近祖先块元素。
- position 属性为absolute，包含块为不是static的祖先元素，这跟定位差不多。
- position 为 fixed，包含块就是 viewport，也就是整个屏幕大小
元素的width、padding、margin、定位的偏移值「top，left」百分比是根据包含块的宽度计算
如何画一个自适应宽高的正方形
div{ width: 100%; padding-bottom: 100%;}复制代码 因为padding跟width的计算是根据包含块的宽度计算的，而height = content + padding 所以这样能画出一个正方形。