7. css重要概念

这一章，我给大家介绍一下css中几个极其重要的概念。了解以下概念对深入css本质十分重要。

包含块
BFC和IFC
层叠上下文
这些东西比较抽象，难以理解。

7.1 包含块

7.1.1 什么是包含块
包含块是视觉格式化模型的一个重要概念，他和css盒子模型类似，也可以将包含块理解为一个矩形盒子，这个矩形的作用是为这个矩形内部的后代元素（子元素、孙元素等）提供一个参考。一个元素的大小和定位往往是由该元素所在的包含块决定的。
通常情况下，一个元素的包含块是由离他最近的“块级祖先元素”和“内容边界”决定的。但当元素被设置为绝对定位时，该元素的包含块是由离他最近的position：relative或position：absolute的祖先元素决定的。一个元素生成的盒子会扮演该元素的内部元素包含块的角色。也就是说，一个元素的css盒子为它的内部元素创建了包含块。
7.1.2 包含块的判定以及包含块的范围
一个元素会为他的内部元素创建包含块，内部元素的大小以及定位都和他的包含块有关。那么能不能说说一个元素的包含块就是他的父元素？答案是否定的。
1.根元素
根元素是一个页面最顶端的元素，他没有父元素。根元素存在的包含块，被称为初始包含块。
2.固定定位元素
如果元素的position属性为fixed，那么它的包含块是当前的可视窗口。
3.静态定位元素和相对定位元素
如果元素的position属性为static或者relative，那么他的包含块是由离他最近的块级祖先元素创建的。祖先元素必须是block、inline-block或者table-cell类型。
举例

<body>
<div>
<p><span><strong>绿叶学习网</strong></span></p>
</div>
</body>

根据上面的定义，各元素的包含块元素如下表1-7所示。

元素	包含块
div	body
p	div
span	p
strong	p
表1-7 包含块关系表
4.绝对定位元素
如果元素的position属性为absolute，那么它的包含块是最近的position属性不为static的祖先元素。如果绝对定位元素找不到position属性为static的祖先元素，则他的包含块是body元素。
对于绝对定位元素包含块的范围，我们分两种情况考虑。

如果祖先元素是块元素，则包含块的范围为祖先元素的padding edge。
如果祖先元素是行内元素，则包含块取决于祖先元素的direction属性。
当祖先元素为行内元素时，包含块的范围比较复杂。

7.2 层叠上下文

层叠上下文也许我们接触的比较少，但是这是一个十分重要的概念。理解层叠上下文，不仅可以帮助我们深入理解z-index对元素堆叠顺序的控制，而且对于我们深入理解浮动和定位也是非常重要的。

层叠上下文
层叠级别
7.2.1 什么是层叠上下文
层叠上下文，即stacking context，是HTML中的一个三维概念。从“z-index属性”我们得知，虽然一个网页是平面的，但是实际上网页是三维结构，除了x轴、y轴还有z轴。其中，z轴用来设定层的先后顺序。
层叠上下文和块级格式上下文相似，是可以创建出来的，也就是说，和创建BFC一样，可以在css中添加一定的属性用于为某个元素创建一个层叠上下文。
如果一个元素具备以下任何一个条件（不考虑css3），则该元素会创建一个新的层叠上下文。
根元素
z-index不为auto的定位元素
这里注意，根元素创建的一个层叠上下文，我们称之为“根层叠上下文”。这个跟根元素创建一个BFC是一样的。
从上面我们知道，如果我们想要创建一个新的层叠上下文，也就只有一个途径——使用z-index属性。
7.2.2 什么是层叠级别
层叠级别，即stacking level 。我们可以使用z-index属性为一个元素创建一个新的层叠上下文。但一个元素往往会有背景色、浮动子元素、定位子元素，那么这些东西又是遵循怎样的顺序来堆叠的呢？
同一个层叠上下文的背景色以及内部元素，谁在上谁在下，这些都是由层叠级别来决定的。也就是说，层叠级别针对同一个层叠上下文而言的。层叠级别与层叠上下文是两个不同的概念。
在同一个层叠上下文中，层叠级别从低到高排列如下，如图1-8所示。
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为正值得“内部元素”。
图1-8 统一层叠上下文中的“层叠级别”
从上图我们了解到
除了“边框和背景”这一条在当前层叠上下文之外，其他的都是针对当前层叠上下文内部的元素。
关于块盒子（block-level）和行内盒子（inline-level box）
父元素内部的元素（即后代元素），如果是一个z-index取值不为auto的定位元素，则这个元素会创建新的层叠上下文。不过这个由内部元素创建的层叠上下文依旧属于父元素层叠上下文的一部分。也就是说，层叠上下文是可以嵌套的，内部元素所创建的层叠上下文均受制于父元素创建的层叠上下文。不过这个由内部元素创建的层叠上下文依旧属于父元素层叠上下文的一部分。也就是说，层叠上下文是可以嵌套的，内部元素所创建的层叠上下文均受制于父元素创建的层叠上下文。
可能大家比较疑惑，为什么行内元素的层叠级别高于浮动元素和块级元素？我们看一下图1-9，就会明白了。
图1-9 层叠级别分析图
边框和背景一般为装饰，所以层叠级别最低。浮动元素和块元素一般用作布局，而行内元素都是内容。对于一个页面来说，最重要是内容。所以内容比布局的层叠级别更高。
7.2.3 层叠上下文的特点
一个元素在z轴方向上的堆叠顺序，是由“层叠上下文”和“层叠级别”这两个元素决定的。
在同一个层叠上下文中，我们比较的是“内部元素层叠级别”。层叠级别大的元素显示在上，层叠级别小的元素显示在下。
在同一个层叠上下文中，如果两个元素的层叠级别相同（z-index值相同），则后面的元素堆叠在前面元素的上面，遵循“后来者居上”原则。
在不同的层叠上下文中，我们比较的是“父级元素层叠级别”。元素显示顺序以“父级层叠上下文”的层叠级别来决定现实的先后顺序，与自身的层叠级别无关。
举例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title></head>
<body>
<div id="wrapper">
<img src="data:images/ailianshuo.png" alt="">
<div id="content">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊，自李唐来世人甚爱牡丹。于都爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。予谓菊，花之隐逸者也；牡丹花之富贵者也；莲，花之君子者也。夷！菊之爱，陶后鲜有闻；莲之爱，同予者何人？牡丹之爱，宜乎众矣。</div>
</div>
</body>
</html>

预览效果如图1-10所示

图1-10 浮动引起的文字环绕效果
分析
一个元素浮动之后，他的层叠级别比正常文档流下的块级盒子的层叠级别要高。此时浮动元素会“浮”到上面去，脱离文档流，三维立体效果图如图1-11所示。

图1-11 分析图

7.2 BFC和IFC

7.2.1 基本概念
在css中，页面的任何一个元素都可以看成一个盒子。在普通文档流中，盒子会参与一种格式上下文。这个盒子可能是块盒子也可能是行内盒子。一个盒子只能是块盒子或者是行内盒子，不能是块盒子的同时又是行内盒子。其中块盒子参与BFC（块级格式上下文），行内盒子参与IFC（行级格式上下文）。
1.格式上下文
格式上下文是w3c css2.1规范中一个很重要的概念，他指的是页面中的一块渲染区域。除此之外，这个格式上下文有一套自己的渲染规则。格式上下文决定了其内部元素将如何定位，以及和其他元素之间的关系。
格式上下文有以下两种类型

块级格式上下文，即block Formatting Context,简称BFC。
行级格式上下文，即inline Formatting Context,简称IFC。
2.盒子
盒子，又称css盒子，是css布局的基本单位。简单来说，一个页面就是由很多个盒子组成的。元素的类型和display属性决定了盒子的类型。不同类型的盒子，会参与不同的格式上下文。常见的display属性取值如表1.1所示。
表1.1 常见的display属性取值

属性值	说明
inline	行内元素
block	块元素
inline-block	行内块元素
table	以表格形式展示。类似于table元素
table-row	以表格行形式显示，类似于tr元素
table-cell	以表格列形式显示，类似于td元素
none	隐藏元素
上面已经提到了，盒子的类型一般有“块盒子”和“行内盒子”两种。

块盒子
块盒子，即“block-level box”。元素类型（即display属性）为block、table、list-item的元素，会生成块盒子（block-level box）。
块盒子会参与块级格式上下文。也就是说，元素类型为block、table、list-item的元素都会参与块级格式上下文（BFC）。
行内盒子
行内盒子，即“inline-level box”。元素类型（即display属性）为inline、inline-block、inline-table的元素都会参与行级格式上下文（IFC）。
除了block-level box 和inline-level box这两种盒子，在css中还有一个run-in box 盒子。不过run-in box是css3新增的。
7.2.2 什么是BFC
BFC，全称block Formatting context（块级格式上下文），他是一个独立的渲染区域，只有块盒子（block-level box）参与。块级格式上下文规定了内部的块盒子是如何布局的，并且这个渲染区域与外部区域毫不相干。
1.如何创建BFC
W3C标准中对BFC是这样定义的：浮动元素、绝对定位元素，元素类型（即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，只需要在css中添加上面任意一个属性就可以了，创建新的BFC可以帮助我们解决很多问题。
根元素也会创建BFC，也就是说，默认情况下一个页面中所有的元素都处于同一个BFC中，但是也会产生如下的一些影响。
float：left和float：right会将元素移到左边或者右边，并被其他元素环绕。
overflow：hidden会将超出元素的内容隐藏。
overflow：scroll会产生多余的滚动条。
display：table可能引发响应性问题。
……
因此如果创建一个BFC，一定需要根据需求来选择最恰当的属性。
2.BFC特点
W3C标准描述BFC的特点共有两条
在一个BFC中，盒子从顶端开始一个接着一个的垂直排列，两个相邻盒子之间的垂直间距由margin属性决定。在同一个BFC中，两个相邻块盒子之间垂直方向上的外边距会叠加。
在一个BFC中，每一个盒子的左边边界（margin-left）会紧贴着包含盒子容器的左边（border-left），即使存在浮动元素也是如此。
从上面的w3c标准定义，我们可以得出以下几点重要结论。
在一个BFC内部，盒子会在垂直方向上一个接着一个排列。
在一个BFC内部，相邻的margin-top和margin-bottom会叠加。
在一个BFC内部，每一个元素的左外边界会紧贴着包含盒子的容器的左边，即使存在浮动也是如此。
在一个BFC内部，如果存在内部元素是一个新的BFC，并且存在内部元素是浮动元素，则该BFC的区域不会与float元素的区域重叠。
BFC就是页面上的一个隔离的盒子，该盒子内部的子元素不会影响外部的元素。
计算一个BFC的高度时，其内部浮动元素的高度也会参与计算。
这里提醒一下，能够参与BFC中的盒子是块盒子。就算在这个BFC中存在一个行内元素，这个行内元素参与的是IFC，而不是BFC。
7.2.3 BFC用途
上面给大家介绍了BFC的特点以及怎么区创建一个新的BFC，那么BFC究竟有什么用途呢？BFC的用途很多，常见有以下三个。
创建BFC来避免垂直外边距叠加。
创建BFC来清除浮动。
创建BFC来实现自适应布局。
1.创建BFC来避免垂直外变局叠加
外边距叠加，准确的说是指在同一个BFC中，两个相邻的margin-top和margin-bottom相遇时，两个外边距会合并为一个外边距。其中，叠加之后外边距的高度等于发生叠加之前的两个外边距中的最大值。
举例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#wrapper{width: 200px;border: 1px solid gray;overflow: hidden;/* 创建一个新的BFC*/}#a,#b{height: 60px;line-height: 60px;text-align: center;font-size: 30px;color: white;background-color: purple;}#a{margin-bottom: 20px;}#b{margin-top: 30px;}</style></head><body><div id="wrapper"><div id="a">A</div><div id="b">B</div></div></body>
</html>

预览效果如下图1-12所示。

图1-12垂直外边距叠加
分析
在这个例子中，我们使用overflow：hidden为父元素创建一个BFC，也就是说父元素是一个BFC。因此A与B位于同一个BFC中。
A的margin-bottom为20px,B的margin-top为30px。由于在同一个BFC中，相邻两个盒子的垂直外边距会叠加，因此A和B的垂直距离为30px。
2.创建BFC来清除浮动

BFC包含浮动
我们都知道可以使用overflow：hidden来清除浮动，如果一个元素是一个BFC，则计算该元素高度的时候，内部浮动子元素的高度也得算进去。
举例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><style type="text/css">#wrapper{width: 200px;border: 1px solid black;}#first,#second{width: 80px;height: 40px;border: 1px solid red;}#first{float: left;}#second{float: right;}</style></head><body>
<div id="#wrapper"><div id="first"></div><div id="second"></div>
</div></body>
</html>

预览效果如图1-13所示。

图1-13 浮动引起的父元素高度坍塌
由此我们可以看出，由于父元素没有定义高度，父无法把浮动子元素包裹起来，造成了父元素的高度坍塌，如果我们给父元素添加overflow：hidden，就不会出现坍塌。
BFC避免文字环绕
3.使用BFC创建自适应两列布局
自适应两列布局，指的是在左右两列中，有一列的宽度为自适应，另外一列的宽度是固定的。我们可以使用margin来实现自适应左右两列布局，也可以通过BFC实现自适应两列布局。