第14章：重要概念
14.1 containing block(包含块)
14.1.1 什么是包含块
- 简单来说，包含块就是“包含自己的那块元素”，元素的“包含块”决定了元素的大小和定位。
- “包含块”是一个相对的概念，并不是说父级元素就是包含块。比如说，绝对布局中，父级元素是
position:relative;，子级元素是position:absolute;，那么此时父级元素是子级元素的包含块，自己元素的大小和定位由父级元素决定；但positioin:fixed固定定位元素的包含块是浏览器窗口。
14.1.2 包含块的判断以及范围
根元素的包含块
-
<html>根元素是页面最顶端的元素，它没有父元素，但也有包含块，叫做“初始包含块initial containing block”。
固定元素的包含块
- 如果元素是固定定位
position:fixed，那么它的包含块是当前的可视窗口（即当前浏览器窗口）。
静态/相对定位元素的包含块
- 如果元素是静态或相对定位
position:static/relative，那它的包含块是最近的块级(display:block、display:inline-block、display:table-cell)祖先元素。
绝对定位元素的包含块
- 如果元素是绝对定位
position:absolute，那么它的包含块是最近的position属性值为非static的祖先元素，该祖先元素可以是块元素也可以是行内元素。 - 如果元素找不到
position属性值为非static的祖先元素，那么它的包含块就是<html>根元素，这就是为什么在默认情况下，绝对定位元素是相对于浏览器窗口来定位的原因。
包含块的范围
- 包含块的范围分为两种情况：
- 如果祖先元素是块元素，那么包含块的范围由祖先元素的
padding edge(内边距的边界)形成； - 如果祖先元素是行内元素，那么包含块的范围由祖先元素的
direction(方向)属性来决定；
- 如果祖先元素是块元素，那么包含块的范围由祖先元素的
14.2 BFC和IFC
14.2.1 基本概念
- 页面的任何元素都可以看成是一个盒子(box)，盒子分两种类型：块盒子(
block-level box)和行内盒子(inline-level box)。
说明：除了块盒子(
block-level box)和行内盒子(inline-level box)之外，CSS3还增加了一个run-in box盒子。
- 不同的元素和元素的
display属性决定盒子的类型。不同的盒子类型，会根据自己的格式上下文(formatting context)作为渲染规则：- 块盒子(
block-level box)，即display属性为block、table、list-item的元素，参与块级格式上下文(Block Formatting Context，简称BFC)； - 行内盒子(
inline-level box)，即display属性为inline、inline-block、inline-table的元素，参与行级格式上下文(Inline Formatting Context，简称IFC)；
- 块盒子(
14.2.2 什么是BFC
- BFC
Block Formatting Context（块级格式上下文），是块盒子(block-level box)的渲染规则，它是块盒子内部的一个独立渲染区域，这个区域规定了盒子内部如何布局，并且这个区域具有封闭性，与外部区域毫不相关。
创建BFC
- 根据W3C标准对BFC的定义，具备以下任意条件的元素会创建一个新的BFC：
- 根元素；
-
float:left/right的浮动元素； -
position:absolute/fixed的定位元素； -
display属性值为inline-block、table-caption、table-cell的块元素； -
overflow:auto/hidden/scroll的元素；
注意：
display:block/table的元素会参与BFC，但不会创建BFC。
BFC的特点
- 根据W3C标准，总结BFC的渲染规则如下：
- BFC内部，元素沿垂直方向逐个排列；
- BFC内部，垂直相邻的两个元素的间距由
margin属性来决定，且margin-top和margin-bottom会叠加； - BFC内部，元素的左外边界(
margin-left)紧贴容器的左边(border-left)，即便是浮动元素也是如此； - BFC是页面中一个隔离的盒子，BFC内部的子元素不会影响到外面的元素；
- 计算一个BFC的高度时，其内部的浮动元素高度也会参与计算；
14.2.3 BFC的用途
- 创建BFC来避免垂直外边距叠加
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrapper{
width: 200px;
border: 1px dashed gray;
/*为wrapper创建BFC*/
overflow: hidden;
}
/*为B创建BFC*/
#bfc-box{
overflow: hidden;
}
#A,#B{
height: 60px;
line-height: 60px;
text-align: center;
font-size: 30px;
color-interpolation: #000;
background-color: purple;
}
#A{
margin-bottom: 20px;
}
#B{
margin-top: 30px;
}
</style>
</head>
<body>
<div class="wrapper">
<!-- A处于为wrapper的BFC -->
<div id="A"></div>
<!-- B处于为bfc-box的BFC -->
<div id="bfc-box">
<div id="B"></div>
</div>
</div>
</body>
</html>
- 创建BFC来清除浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>创建BFC清除包含的浮动</title>
<style type="text/css">
.wrapper{
width: 200px;
border: 1px dashed gray;
/*由于父容器没定义高度，会造成父容器高度塌陷，通过创建BFC解决，因为BFC在计算自身高度时会把子元素的高度计算进去*/
overflow: hidden;
}
#first,#second{
width: 80px;
height: 40px;
border: 1px solid brown;
}
#first{
float: left;
}
#second{
float: right;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="first"></div>
<div id="second"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>创建BFC避免文字环绕</title>
<style type="text/css">
.wrapper{
width: 400px;
height: 200px;
border: 1px solid gray;
padding: 10px;
}
img{
width: 40px;
height: 40px;
float: left;
}
#content{
background-color: papayawhip;
/*由于浮动的img层叠级别比普通文档流高，创建BFC后不会和同级的浮动元素重叠*/
overflow: hidden;
}
</style>
</head>
<body>
<div class="wrapper">
<img src="../img/weibo.png"/>
<div id="content">【核电站事故102岁老人拒绝避难自杀 东电被下赔偿命令】东京电力福岛第一核电站事故发生后，在福岛县饭馆村自杀的102岁男性之遗属，向东电要求精神损失费等损害赔偿的诉讼判决，已于20日在福岛地方法院进行。判决命令东电支付1520万日元(约合人民币89万元)</div>
</div>
</body>
</html>
- BFC创建自适应两列布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#sidebar{
float: left;
width: 100px;
height: 150px;
background-color: aliceblue;
}
#content{
height: 200px;
width: auto;
background-color: #CCCCCC;
/*创建BFC使得浮动元素不会覆盖自己*/
overflow: hidden;
}
</style>
</head>
<body>
<div id="sidebar"></div>
<div id="content"></div>
</body>
</html>
14.3 stacking content(层叠上下文)
- 理解层叠上下文，有助于深入理解浮动和定位布局，以及深入理解
z-index对元素的堆叠顺序的控制。 - 层叠上下文包含两个概念：层叠上下文(
stacking content)和层叠级别(stacking level)。
14.3.1 什么是层叠上下文
- 如果一个元素具备以下任意一个条件（不考虑CSS3），那么该元素将创建一个新的层叠上下文：
-
根元素 ：
<html>元素会创建“根层叠上下文”； -
z-index属性值为非auto的定位元素 ：在元素只有通过z-index属性会使创建层叠上下文；
-
根元素 ：
14.3.2 什么是层叠级别
- 有没有想过一个问题，
z-index属性为一个元素创建了层叠上下文，那么该元素的背景色、浮动的子元素、定位的子元素等，谁在上谁在下，应该遵循什么样的规则来堆叠呢？而层叠级别就是针对同一个层叠上下文的层叠规则。
注意：层叠上下文和层叠级别是两个不同的概念
- 层叠级别的优先级由高到低排序：
-
z-index值为正整数的子元素； -
z-index值为0的子元素； - 普通文档流的行内盒子(inline-level box)：行内元素是内容，块元素是布局容器，所以内容更重要，层叠级别也更高；
- 浮动盒子：非定位的浮动元素；
- 块盒子：普通文档流下的块盒子(block-level box)；
-
z-index值为负整数的子元素； - 背景和边框：当前层叠上下文的
background和border属性是装饰作用，层叠级别也最低；
-
14.3.3 层叠上下文的特点
- 一个元素在z轴的堆叠顺序由“层叠上下文”和“层叠级别”两个因素决定：
- 同一个层叠上下文中，比较的是“内部元素层叠级别”，级别大的元素显示在上，级别小的元素显示在下；
- 同一个层叠上文如果层叠级别相同，则遵循“后来者居上”原则，比如
z-index值相同时，后面的元素堆叠在上面； - 不同的层叠上下文，比较的是“父级元素的层叠级别”；
网友评论