1.包含块（containing block）
- 什么是包含块？
- 简单来说，就是可以决定一个元素的大小和定位的元素
- 包含块的重要性
- 包含块就一定是父元素吗？（注意）
- 不一定，包含块的确定过程完全依赖于这个元素的position属性的取值
- 包含块的判定以及包含块的范围
- 根元素（html）
- 根元素是页面最顶端的元素，它没有父元素，但它存在包含块，它的包含块被称为：“初始包含块”(inital containing block)
- 固定定位元素（position:fixed）
- 它的包含块为浏览器，也就是由浏览器来决定设置了该属性的元素的大小和定位
- 静态定位(position:static)和相对定位(position:relative)
- 它的包含块是块级父元素，父元素必须是inline-block、block或者是table-cell类型(重点理解)
- 根元素（html）
<body>
<div> // div 包含块为 body
<p><span><strong>你好</strong></span></p>
// p 包含块为div
// span 包含块为 p
// strong 包含块为 p
</div>
</body>-
- 绝对定位元素（position:absolute）
- 如果元素的position属性为absolute，那么它的包含块是最近的position属性不为static的父元素（这里的父元素可以是块元素，也可以是行内元素）（好好理解）
- 绝对定位元素包含块的范围（好好琢磨）
- 如果父元素为块元素，则包含块的范围为父元素的padding edge（内边距）
- 如果父元素为行内元素，则包含块取决于父元素的direction属性
- direction属性指定文本方向和书写方向（具有继承），默认值为ltr(left-to-right)，同理还有设置值为rtl(right-to-left)
- 绝对定位元素（position:absolute）
2.BFC和IFC
- 背景
- 页面的任何元素都可以看成是一个盒子。在普通文档流中，盒子会参与一种格式上下文。这个盒子可能是块盒子，也可能是行内盒子。其中块盒子参与BFC(块级格式上下文)，行内盒子参与IFC(行级格式上下文)（这里没考虑CSS3中的run-in box盒子）
- 格式上下文（formatting context）
- 格式上下文指的是页面中一块渲染区域，除此之外，这个格式上下文有一套自己的渲染规则
- 格式上下文决定了其内部元素如何定位，以及和其他元素之间的关系
- 格式上下文的分类：
- 块级格式上下文（Block Formatting Context），即BFC
- 行级格式上下文（Inline Formatting Context），即IFC
- 块级格式上下文：
- 它是一个独立的渲染区域，只有块盒子参与。块级格式上下文规定了内部的块盒子是如何布局的，并且这个渲染区域与外部区域毫不相关。
- 如何创建BFC?(涉及到以下任意一个条件就会创建BFC)（时刻记住“根元素”创建了BFC）
- 根元素（因根元素也会创建BFC,说明默认情况下一个页面中所有的元素都处于同一个BFC中）
- float属性除了none以外的值
- position属性除了static与relative以外的值
- overflow属性除了visible以外的值，也就是auto、hidden、scroll
- 元素类型（即display属性）为inline-block、table-caption、table-cell
- 注意：
-
-
- display属性值为block、table、list-item的元素，会生成块元素，但不会创建BFC,块元素只是参与了BFC,而并未创建BFC
-
- 虽然这些都能创建BFC，但是也会产生一些影响
- float:left和float:right会将元素移到左边或右边，并被其它元素环绕
- overflow:hidden会将超出元素的内容隐藏
- overflow:scroll会产生多余的滚动条
- display:table可能引发响应性问题
- BFC的特点
- 在一个BFC中，盒子从顶端开始一个接一个地垂直排列，两个相邻盒子之间的垂直间距由margin属性决定
- 在一个BFC中，每一个盒子的左外边界（margin-left）会紧贴着包含盒子的容器的左边（border-left）（对于从右到左的格式化，则相反），即使存在浮动元素也是如此
- 根据BFC的特点得出的结论：（非常重要，认真斟酌）
- 在同一个BFC内部，盒子会在垂直方向上一个接着一个排列
- 在同一个BFC内部，相邻的margin-top和margin-bottom会重叠（这个记住，叠加是因为BFC）
- 在同一个BFC内部，每一个盒子的左外边界（margin-left）会紧贴着包含盒子的容器的左边，即使浮动也是如此
- 在同一个BFC内部，如果存在内部元素是一个新BFC，并且存在内部元素是浮动元素，则该BFC的区域不会与float元素区域重叠(也就是说BFC区域内部元素互不干扰，这也是创建BFC来取消margin-top和bottom重叠的方法)（仔细理解）
- BFC就是一个页面的一个隔离的盒子，该盒子内部的子元素不会影响外部的元素
- 计算一个BFC的高度时，其内部浮动元素的高度也会参与计算（这是利用BFC清除浮动的原理）
- BFC的用途
- 创建BFC来避免垂直外边距叠加（利用BFC区域内部元素互补干扰这个结论来实现）
<style>
#father{
width:200px
border: 1px solid black;
overflow: hidden; // 创建了BFC
}
#son{
width: 100px;
height: 100px;
background-color: red;
margin-bottom: 10px;
}
#son2{
width: 100px;
height: 100px;
overflow: hidden; // 创建了新的BFC
}
#son3{
width: 100px;
height: 100px;
margin-top: 30px;
background-color: green;
}
</style>
<body>
<div id="father"> // 创建了BFC
<div id="son">A</div>
<div id="son2"> // 创建了新的BFC
<div id="son3">B</div>
</div>
</div>
</body>-
- 创建BFC来清除浮动（这也是解释了为什么overflow:hidden能清除浮动）
- overflow:hidden使得父元素变成了一个BFC,BFC在计算自身高度的时候，会把浮动子元素的高度也算进去，因此最终父元素的高度等于浮动子元素的高度，这时就相当于清除了浮动
- 且利用BFC可以避免文字环绕
- 创建BFC来清除浮动（这也是解释了为什么overflow:hidden能清除浮动）
<style>
#father{
width: 300px;
border: 1px solid black;
overflow: hidden; // 创建了BFC
}
#son-left,#son-right{
width: 100px;
height: 50px;
border: 1px solid black;
}
#son-left{float: left;}
#son-right{float: right;}
</style>
<body>
<div id="father">
<div id="son-left"></div>
<div id="son-right"></div>
</div>
</body>-
- 创建BFC来实现自适应两列布局
- 自适应两列布局指的是，有一列的宽度为自适应，另外一列的宽度使固定的
- 创建BFC来实现自适应两列布局
3.层叠上下文（stacking context）
- 层叠上下文
- 理解层叠上下文，对于我们深入理解浮动和定位是非常重要的，还有z-index对元素堆叠顺序的控制
-
- 层叠上下文跟块级格式上下文一样，是可以创建出来的，也就是说你跟创建块级格式上下文一样，在CSS中添加一定的属性用于为某个元素创建一个层叠上下文
- 创建层叠上下文的条件：（这里只说一个）（记住）
- z-index不为auto的定位元素（因为z-index只在定位元素中才会被激活）
- 层叠级别（重要）（stacking level）
- 首先声明：层叠级别和层叠上下文是完全不同的两个概念（认真理解）
- 层叠级别作用：
- 同一个层叠上下文的背景色以及内部元素，谁在上谁在下，这些都是由层叠级别决定的
- 在同一个层叠上下文中，层叠级别从低到高排列
- 边框和背景：也就是当前层叠上下文的边框和背景
- 负z-index：z-index为负值的“内部元素”
- 块盒子：普通文档流下的块盒子（block-level box）
- 浮动盒子：非定位的浮动元素（也就是排除了position:relative的浮动盒子）
- 行内盒子：普通文档流下的行内盒子（inline-lever box）
- z-index：z-index为0的“内部元素”
- 正z-index：z-index为正值得“内部元素”
- 注意：（层叠上下文可以内嵌）
- 父元素内部的元素（即后代元素），如果是一个z-index取值不为auto的定位元素，这时它也会新创建一个层叠上下文，也就是说，层叠上下文是可以嵌套的，内部元素所创建的层叠上下文均受制于父元素创建的层叠上下文
- 行内元素的层叠级别比块盒子、浮动盒子的层叠级别都要高
- 层叠上下文的特点
- 一个元素在z轴方向上的堆叠顺序，是由“层叠上下文”和“层叠级别”这两个因素决定的
- 在同一个层叠上下文中，我们比较的是“内部元素层叠级别”。层叠级别大的元素显示在上，层叠级别小的元素显示在下
- 在同一个层叠上下文中，如果两个元素的层叠级别相同（即z-index值相同），则后面的元素堆叠在前面元素的上面，遵循“后来者居上”原则
- 在不同的层叠上下文中，我们比较的是“父级元素层叠级别”。元素显示顺序以“父级层叠上下文”的层叠级别来决定显示的先后顺序，与自身的层叠级别无关
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
