包含块、层叠上下文、BFC

时间:2022-10-30 19:53:24

包含块

  什么是包含块?简单来说,就是决定一个元素大小和定位的元素。一个元素会为它的内部元素创建包含块,但也不能说元素的包含块就是它的父元素:

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的更多相关文章

  1. CSS——关于z-index及层叠上下文(stacking context)

    以下内容根据CSS规范翻译. z-index 'z-index'Value: auto | <integer> | inheritInitial: autoApplies to: posi ...

  2. css中margin重叠和一些相关概念(包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes )

    平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外 ...

  3. 由position属性引申的关于css的进阶讨论(包含块、BFC、margin collapse)

    写这篇文章的起因是源于这篇文章:谈谈面试与面试题 中关于position的讨论,文中一开始就说的这句话: 面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的 ...

  4. 坑爹的BFC&semi;块格式上下文

    Formatting context(FC) Formatting context 是 W3C CSS2.1 规范中的一个概念.它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位 ...

  5. 块格式化上下文(Block Formatting Context,BFC)

    块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域. 下列方式会创建块格 ...

  6. 前端面试题-BFC&lpar;块格式化上下文&rpar;

    一.BFC 的概念 1.规范解释 块格式化上下文(Block Formatting Context,BFC)是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元 ...

  7. 层叠上下文 Stacking Context

    层叠上下文 Stacking Context 在CSS2.1规范中,每个盒模型的位置是三维的,分别是平面画布上的x轴,y轴以及表示层叠的z轴.对于每个html元素,都可以通过设置z-index属性来设 ...

  8. 学习块格式化上下文(BlockFormattingContext)

    什么是BFC BFC全称是Block Formatting Context,即块格式化上下文.它是CSS2.1规范定义的,关于CSS渲染定位的一个概念.要明白BFC到底是什么,首先来看看什么是视觉格式 ...

  9. CSS基础:层叠顺序和层叠上下文

    简介 在考虑到两个元素可能重叠的情况下,层叠顺序决定了那个元素在前面,那个元素在后面,这是针对普通元素而言.而层叠上下文和块级格式化上下文 (BFC) 一样,基本上也是由一些 CSS 属性创建的,它单 ...

随机推荐

  1. linux 下解压rar文件

    今天遇到要在linux 服务器上解压几个rar 文件的问题,rar似乎是win 专属的压缩格式,所以linux 原生工具链中并没有支持rar 解压的工具.经过一系列搜索确定了一个脚linuxrar 的 ...

  2. &lbrack;JS&rsqb;应用splice删除多元素时出现的坑

    ------------------------------------------------------------------------------------- 先看一个片段: var fr ...

  3. JavaScript&colon;最烂与最火

    ============================================================================== 一.世无英雄,遂使竖子成名 1 Web客户 ...

  4. NOIP2011 普及組 統計單詞數

    题目描述 一般的文本编辑器都有查找单词的功能,该功能可以快速定位特定单词在文章中的位置,有的还能统计出特定单词在文章中出现的次数. 现在,请你编程实现这一功能,具体要求是:给定一个单词,请你输出它在给 ...

  5. mvvm框架下页面与ViewModel的各种参数传递方式

    传单个参数的话在xaml用     Command={Binding ViewModel的事件处理名称}    CommandParameter={Binding 要传递的控件名称} ViewMode ...

  6. 链接分析算法之:主题敏感PageRank

    链接分析算法之:主题敏感PageRank     前面的讨论提到.PageRank忽略了主题相关性,导致结果的相关性和主题性降低,对于不同的用户,甚至有很大的差别.例如,当搜索“苹果”时,一个数码爱好 ...

  7. const volatile同时限定一个类型int a &equals; 10

    const和volatile放在一起的意义在于: (1)本程序段中不能对a作修改,任何修改都是非法的,或者至少是粗心,编译器应该报错,防止这种粗心: (2)另一个程序段则完全有可能修改,因此编译器最好 ...

  8. Mongodb分片集群技术&plus;用户验证

    随着数据量持续增多,后续迟早会出现一台机器硬件瓶颈问题的.而mongodb主打的就是海量数据架构,“分片”就用这个来解决这个问题. 从图中可以看到有四个组件:mongos.config server. ...

  9. 20172302 《Java软件结构与数据结构》第九周学习总结

    2018年学习总结博客总目录:第一周 第二周 第三周 第四周 第五周 第六周 第七周 第八周 第九周 教材学习内容总结 第十五章 图 1.图:图(graph)是由一些点(vertex)和这些点之间的连 ...

  10. POJ 2376

    #include<iostream>//by chengdacaizi. #include<stdio.h> #define MAXN 25005 using namespac ...