CSS中一些重要概念

在CSS的最后一个博客中，将学习整理一些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来实现自适应布局。