今天将学习整理一些CSS中的重要概念，对这些重要概念的掌握，将对CSS的认识十分重要。
了解这些概念对深入理解CSS的本质十分重要：
（1）包含块containing block
（2）BFC和IFC
（3）层叠上下文
如果要真正地掌握CSS，一定要对此认真研读、一定认真研读、一点认真研读（重要的事情说三遍）。
1:包含块
我们都知道，如果有两个div，一个是父元素，另外一个是子元素，父元素会决定子元素的大小和定位。包含块是什么呢？简单来说，就是可以决定一个元素大小和定位的元素。包含块是视觉格式化模型中的一个重要概念，它与CSS盒子模型类似。包含块也可以理解为一个矩形盒子、这个矩形的作用是为这个矩形内部的后代元素（子元素、孙元素等）提供一个参考。一个元素的大小和定位往往是由该元素所在的包含块决定的。
通常情况下，一个元素的包含块由离它最近的“块级祖先元素”的“内容边界”决定的。但当元素被设置为绝对定位时，此时该元素的包含块是由离它最近的“position:relative”或"position:absolute"的祖先元素决定。一个元素生成的盒子会扮演该元素的内部元素包含块的角色。也就是说，一个元素的CSS盒子为它的内部元素建造了包含块。
****包含块的判定以及包含块的范围
一个元素会为它的内部元素创建包含块，内部元素的大小以及定位都跟它的包含块有关。那么是不是说一个元素的包含块就是它的父元素呢？答案是否定的。
（1）根元素
根元素（HTML）元素，是一个页面中最顶端的元素，它没有父元素。根元素存在的包含块，被称为“初始包含块”。
（2）固定定位元素
如果元素的position属性为fixed，那么它的包含块是当前可视窗口，也就是当前浏览器窗口。
（3）静态定位元素和相对定位元素
如果元素的position属性为static或relative，那么它的包含块是它最近的块级祖先元素创建的。祖先元素必须是block、inline_block或者table-cell类型。
（4）绝对定位元素
如果元素的position属性为absolute，那么它的包含块是由最近的position属性不为static的祖先元素。这里的祖先元素可以是块元素，也可以是行内元素。因此，我们可知，绝对定位元素是根据其包含块来定位的，这个包含块是离它最近的position属性不为static的祖先元素。如果绝对定位元素找不到position属性不为static的祖先元素，则它的包含块是根元素（html元素）。
对于包含块的范围，也分为两种情况考虑。
（1）如果祖先元素是块元素，则包含块的范围为祖先元素的padding edge形成。
（2）如果祖先是行内元素，则包含块取决于祖先元素的direction属性。
2：层叠上下文
理解层叠上下文，不仅可以帮助我们深入理解z-index对元素堆叠顺序的控制，而且对于我们深入理解浮动和定位也是非常重要的。
（1）层叠上下文
层叠上下文，是HTMl中的一个三维的概念，我们知道，网页是三维结构的，它有X,Y,Z轴，Z轴往往都用来设定层的先后顺序的。层叠上下文跟块级格式上下文（BFC）相似，是可以创建出来的，也就是说，你可以在CSS中添加一定的属性来将某个元素创建一个层叠上下文出来。
如果一个元素具备以下任何一个条件，则该元素会创建一个新的层叠上下文。
（1）根元素 （2）z-index不为auto的定位元素
（2）层叠级别
层叠级别是针对同一个层叠上下文而言的。层叠级别与层叠上下文，是两个不同的概念。
在同一个层叠上下文中，层叠级别从低到高排列。
层叠级别由低到高：（1）背景和边框（父级），也就是当前层叠上下文的背景和边框。 （2）负z-index:z-index为负值的“内部元素”。 （3）块盒子：普通文档流下的块盒子（block-level box）。 （4）浮动盒子：非定位的浮动元素（也就是排除了position:relative的浮动盒子）。 （5）行内盒子：普通文档流下的行内盒子（inline-level box）。 （6）z-index：0：z-index为0的“内部元素”。（7）正z-index:z-index为正值的“内部元素”。
背景和边框一般为装饰属性，所以层叠级别最低。浮动元素和块元素一般用作布局，而行内元素都是内容，对于一个页面来说，最重要的当然是内容。因此，一定要让内容的层叠级别相当高。
（3）层叠上下文的特点
一个元素在z轴方向上的堆叠顺序，是由“层叠上下文”和“层叠级别“这两个因素决定的：
①同一个层叠上下文中，我们比较的是“内部元素层叠级别”。层叠级别大的元素显示在上，层叠级别小的元素显示在下。
②同一个层叠上下文中，如果两个元素的层叠级别相同（即z-index值相同），则后面的元素堆叠在前面元素的上面，遵循“后来者居上”原则。
③不同的层叠上下文中，我们比较的是“父级元素层叠级别”。元素显示顺序以“父级层叠上下文”的层叠级别来决定显示的先后顺序，与自身的层叠级别无关。
3：BFC和IFC
（1）基本概念
在CSS中，页面中任何一个元素都可以看成是一个盒子。在普通文档流中，盒子会参与一种格式上下文。这个盒子可能是块盒子，也可能是行内盒子。一个盒子只能是块盒子或者行内盒子，不能同时是块盒子又是行内盒子。其中块盒子参与BFC（块级格式上下文），行内盒子参与IFC（行级格式上下文）。
（2）格式上下文
它指的是页面中的一块渲染区域，并且这个格式上下文有一套自己的渲染规则。格式上下文决定了其他内部元素将如何定位，以及和其他元素之间的关系。
格式上下文有两种：（1）块级格式上下文（BFC） （2）行级格式上下文（IFC）
（3）盒子
盒子，又称CSS盒子，是CSS布局的基本单位。元素的类型和display属性决定了盒子的类型。不同类型的盒子，会参与不同的格式上下文。
盒子的类型一般有“块盒子”和“行内盒子”这两种：
①块盒子
块盒子，即block-level box。元素类型（即display属性）为block、table、list-item的元素，会生成块盒子。
块盒子会参与块级格式上下文。也就是说，元素类型为block、table、list-item的元素都会参与块级格式上下文（BFC）。
②行内盒子
行内盒子，即inline-level box。元素类型（即display属性）为inline、inline-block、inline-table的元素，会生成行内盒子。
行内盒子会参与行级格式上下文。也就是说，元素类型为inline、inline-block、inline-table的元素都会参与行级格式上下文（IFC）。
（4）BFC
BFC 全称Block Formatting Context（块级格式上下文）。它是一个独立的渲染区域，只有块盒子（block-level box）参与。块级格式上下文规定了内部的块盒子是如何布局的，并且这个渲染区域与外部区域毫不相关。
①如何创建BFC
W3C标准中对BFC的定义：浮动元素，绝对定位元素（position为absolute或fixed），元素类型（即display属性）为inline-block、table-caption、table-cell，以及overflow属性不为visible的元素将会创建一个新的块级格式上下文（BFC）。
如果一个元素具备以下任何一个条件，则该元素都会创建一个新的BFC。
Ⅰ：根元素
Ⅱ：float属性除了none以外的值，也就是“float:left”和“float:right”
Ⅲ：position属性除了static和relative以外的值，也就是“position:absolute”和“position:fixed”。
Ⅳ：overflow属性除了visible以外的值，也就是“overflow-auto”“overflow：hidden”和“overflow：scroll”。
Ⅴ：元素类型（即display属性）为inline-block、table-caption、table-cell。
②BFC的特点
（1）在一个BFC中，盒子从顶端开始垂直一个接着一个地排列，两个相邻盒子之间的垂直间距由magin属性决定。在同一个BFC中，两个相邻盒子之间垂直方向上的外边距会叠加。
（2）在一个BFC中，没一个盒子的左外边界（margin-left）会紧贴着容器的左边（border-left）（对于从右到左的格式化，则相反），即使存在浮动元素也是如此。
因此，得出的一下几点重要结论十分重要。
（1）在一个BFC内部，盒子会在垂直方向上一个接着一个地排列。
（2）在一个BFC内部，相邻的margin-top和margin-bottom会叠加。
（3）在一个BFC内部，每一个元素的左外边界会紧贴着包含盒子的左边，即使存在浮动元素也是如此。
（4）在一个BFC内部，如果存在内部元素是一个新的BFC，并且存在内部元素是浮动元素。则该BFC区域不会与float元素的区域重叠。
（5）BFC就是页面上的一个隔离的盒子，该盒子内部的子元素不会影响到外面的元素。
（6）计算一个BFC的高度时，其内部浮动元素的高度也会参与计算。
③BFC的用途
（1）创建BFC来避免垂直外边距叠加。
（2）创建BFC 来清除浮动。
①BFC包含浮动 ②BFC避免文字环绕
（3）创建BFC来实现自适应布局。
最后
“相信有很多想学前端的小伙伴，今年年初我花了一个月整理了一份最适合2018年学习的web前端干货，从最基础的HTML+CSS+JS到移动端HTML5到各种框架都有整理，送给每一位前端小伙伴，53763，
1707这里是小白聚集地，欢迎初学和进阶中的小伙伴。”
