包含块
什么是包含块?简单来说,就是决定一个元素大小和定位的元素。一个元素会为它的内部元素创建包含块,但也不能说元素的包含块就是它的父元素:
1、position:fixed 的元素
包含块是当前可视窗口
2、position:absolute 的元素
包含块是最近的 position属性为非static的祖先元素
3、静态定位和相对定位 的元素
包含块是最近的块级祖先元素
层叠上下文
跟BFC相似,是可以创建出来的(z-index: Number)
同一个层叠上下文中,层叠级别由低到高:边框和背景、负z-index、块盒子、浮动盒子、行内盒子、z-index:0、正z-index
一个元素在Z轴上的堆叠顺序,由『层叠上下文』和『层叠顺序』决定:
1、同一个层叠上下文,层叠级别大的元素在上
2、同一个层叠上下文,层叠级别相同,后来居上
3、不同的层叠上下文,由父级元素层叠上下文决定
BFC(块级格式上下文)
创建BFC
1、float: left、right
2、positon: absolute、fixed
3、display: inline-block、table-caption、table-cell (注:display为float、table、list-item等类型的会参与BFC,不会创建 )
4、overflow: auto、hidden、scroll
BFC的特点
1、在一个BFC内部,盒子会在垂直方向上排列
2、在一个BFC内部,相邻的margin-bottom和margin-top叠加
3、在一个BFC内部,每个元素左边紧贴着包含盒子的左边
4、在一个BFC内部,如果有一个内部元素是一个新的BFC,则新BFC区域不会与float元素的区域重叠
5、计算一个BFC高度时,内部浮动元素的高度也会参与计算
BFC用途
1、避免垂直外边距叠加 不让他们在同一个BFC里
2、清除浮动 如果一个元素是BFC,计算高度时,内部浮动子元素的高度也得算进去。这就是为什么我们经常用overflow清除浮动的原因
3、避免文字环绕 创建BFC后,新BFC就不会与float元素区域重叠了
4、自适应两列布局 同上
包含块、层叠上下文、BFC的更多相关文章
-
CSS——关于z-index及层叠上下文(stacking context)
以下内容根据CSS规范翻译. z-index 'z-index'Value: auto | <integer> | inheritInitial: autoApplies to: posi ...
-
css中margin重叠和一些相关概念(包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes )
平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外 ...
-
由position属性引申的关于css的进阶讨论(包含块、BFC、margin collapse)
写这篇文章的起因是源于这篇文章:谈谈面试与面试题 中关于position的讨论,文中一开始就说的这句话: 面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的 ...
-
坑爹的BFC;块格式上下文
Formatting context(FC) Formatting context 是 W3C CSS2.1 规范中的一个概念.它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位 ...
-
块格式化上下文(Block Formatting Context,BFC)
块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域. 下列方式会创建块格 ...
-
前端面试题-BFC(块格式化上下文)
一.BFC 的概念 1.规范解释 块格式化上下文(Block Formatting Context,BFC)是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元 ...
-
层叠上下文 Stacking Context
层叠上下文 Stacking Context 在CSS2.1规范中,每个盒模型的位置是三维的,分别是平面画布上的x轴,y轴以及表示层叠的z轴.对于每个html元素,都可以通过设置z-index属性来设 ...
-
学习块格式化上下文(BlockFormattingContext)
什么是BFC BFC全称是Block Formatting Context,即块格式化上下文.它是CSS2.1规范定义的,关于CSS渲染定位的一个概念.要明白BFC到底是什么,首先来看看什么是视觉格式 ...
-
CSS基础:层叠顺序和层叠上下文
简介 在考虑到两个元素可能重叠的情况下,层叠顺序决定了那个元素在前面,那个元素在后面,这是针对普通元素而言.而层叠上下文和块级格式化上下文 (BFC) 一样,基本上也是由一些 CSS 属性创建的,它单 ...
随机推荐
-
linux 下解压rar文件
今天遇到要在linux 服务器上解压几个rar 文件的问题,rar似乎是win 专属的压缩格式,所以linux 原生工具链中并没有支持rar 解压的工具.经过一系列搜索确定了一个脚linuxrar 的 ...
-
[JS]应用splice删除多元素时出现的坑
------------------------------------------------------------------------------------- 先看一个片段: var fr ...
-
JavaScript:最烂与最火
============================================================================== 一.世无英雄,遂使竖子成名 1 Web客户 ...
-
NOIP2011 普及組 統計單詞數
题目描述 一般的文本编辑器都有查找单词的功能,该功能可以快速定位特定单词在文章中的位置,有的还能统计出特定单词在文章中出现的次数. 现在,请你编程实现这一功能,具体要求是:给定一个单词,请你输出它在给 ...
-
mvvm框架下页面与ViewModel的各种参数传递方式
传单个参数的话在xaml用 Command={Binding ViewModel的事件处理名称} CommandParameter={Binding 要传递的控件名称} ViewMode ...
-
链接分析算法之:主题敏感PageRank
链接分析算法之:主题敏感PageRank 前面的讨论提到.PageRank忽略了主题相关性,导致结果的相关性和主题性降低,对于不同的用户,甚至有很大的差别.例如,当搜索“苹果”时,一个数码爱好 ...
-
const volatile同时限定一个类型int a = 10
const和volatile放在一起的意义在于: (1)本程序段中不能对a作修改,任何修改都是非法的,或者至少是粗心,编译器应该报错,防止这种粗心: (2)另一个程序段则完全有可能修改,因此编译器最好 ...
-
Mongodb分片集群技术+用户验证
随着数据量持续增多,后续迟早会出现一台机器硬件瓶颈问题的.而mongodb主打的就是海量数据架构,“分片”就用这个来解决这个问题. 从图中可以看到有四个组件:mongos.config server. ...
-
20172302 《Java软件结构与数据结构》第九周学习总结
2018年学习总结博客总目录:第一周 第二周 第三周 第四周 第五周 第六周 第七周 第八周 第九周 教材学习内容总结 第十五章 图 1.图:图(graph)是由一些点(vertex)和这些点之间的连 ...
-
POJ 2376
#include<iostream>//by chengdacaizi. #include<stdio.h> #define MAXN 25005 using namespac ...