理解BFC、IFC、GFC、FFC

作者:神秘网友 发布时间:2021-02-23 17:20:18

理解BFC、IFC、GFC、FFC

什么是fc

FC的全称是:Formatting Contexts,是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。

BFC(Block Formatting Contexts)直译为"块级格式化上下文"

Block Formatting Context 叫做“块级格式化上下文”。BFC的布局规则如下:

  1. 内部的盒子会在垂直方向,一个个地放置;
  2. 盒子垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的上下margin会发生重叠;
  3. 每个元素的左边,与包含的盒子的左边相接触,即使存在浮动也是如此;
  4. BFC的区域不会与float重叠;
  5. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之也如此;
  6. 计算BFC的高度时,浮动元素也参与计算。

介绍过了BFC的布局规范,再来说说哪些元素会产生BFC。

  1. 根元素;
  2. float的属性不为none;
  3. position为absolute或fixed;
  4. display为inline-block,table-cell,table-caption,flex;
  5. overflow不为visible

可以解决什么问题:1.不与浮动元素重叠;2.可以清除元素内部浮动;3.解决上下两个相邻元素的重叠(margin);4.自适应布局

详情见:https://www.cnblogs.com/vickylinj/p/14186618.html

IFC(Inline Formatting Contexts)直译为"内联格式化上下文"

IFC布局规则:

  1. 框会从包含块的顶部开始,一个接一个地水平摆放。
  2. 摆放这些框的时候,它们在水平方向上的外边距、边框、内边距所占用的空间都会被考虑在内。在垂直方向上,这些框可能会以不同形式来对齐:它们可能会把底部或顶部对齐,也可能把其内部的文本基线对齐。能把在一行上的框都完全包含进去的一个矩形区域,被称为该行的行框。水平的margin、padding、border有效,垂直无效。不能指定宽高。
  3. 行框的宽度是由包含块和存在的浮动来决定。行框的高度由行高计算这一章所描述的规则来决定。

得出结论:

  1. 一个line box总是足够高对于包含在它内的所有盒子。然后,它也许比包含在它内最高的盒子高。(比如,盒子对齐导致基线提高了)。
  2. 当盒子B的高度比包含它的line box的高度低,在line box内的B的垂值对齐线通过’vertical align’属性决定。当几个行内级盒子在一个单独的line box内不能很好的水平放置,则他们被分配成了2个或者更多的垂直重叠的line boxs.因此,一个段落是很多个line boxs的垂直叠加。Line boxs被叠加没有垂直方向上的分离(特殊情况除外),并且他们也不重叠。
  3. 通常,line box的左边缘挨着它的包含块的左边缘,右边缘挨着它的包含块的右边缘。然而,浮动盒子也许会在包含块边缘和line box边缘之间。因此,尽管line boxs在同样的行内格式上下文中通常都有相同的宽度(就是他的包含块的宽度),但是水平方向上的空间因为浮动被减少了,它的宽度也会变得复杂。Line boxs在同样的行内格式上下文中通常在高度上是多样的(比如,一行也许包含了一个最高的图片然后其他的也可以仅仅只包含文字)
  4. 当在一行中行内级盒子的总宽度比包含他们的line box的宽度小,他们的在line box中的水平放置位置由’text align’属性决定。如果属性是’justify’,用户代理可能会拉伸空间和文字在inline boxs内。
  5. 当一个行内盒子超过了line box的宽度,则它被分割成几个盒子并且这些盒子被分配成几个横穿过的line boxs。如果一个行内盒子不能被分割。则行内盒子溢出line box。
  6. 当一个行内盒子被分割,分割发生则margins,borders,和padding便没有了视觉效果。
  7. 在同样的line box内的行内盒子也许会被分割成几个盒子因为双向的文字。
    Line boxs在行内格式上下文中档需要包含行内级内容时被创造。Line boxs包含没有文字,没有空格,没有带着margins,padding和borders,以及没有其他在流中的内容(比如图片,行内盒子和行内表格),也不会以新起一行结尾。对于在他们内的任何盒子的位置都以他们决定并且必须将他们视作没有高度的line boxs。

主要影响IFC内布局的css:

font-size
line-height
height
vertical-aligin

line box

行盒模型,这是一个显示区域,根据块状容器内,每一行的多个内联元素(inline-level element)都会共同生成一个行盒模型。

font-size

常见的属性,用来指定文本类型节点的大小。IFC内的很多属性的值是基于这个的。

line-height height

在一个由多个内联元素组成的块状容器内,’line-height’为内联元素的行盒模型指定了一个最低高度。 这个最低高度是分别由基线上的最小高度和基线下的最小深度组成。

从上到下四条线分别是顶线、中线、基线、底线。 那么行高是指上下文本行的基线间的垂直距离,即图中两条红线间垂直距离(实际在数值上,行高也等于其它相同颜色间的距离)。

vertical-align

该属性影响由多个内联元素生成的盒模型组成的行内盒模型的垂直定位。
vertical有几个特定的值,或者指定一个值。

p class="a1"
  span style="vertical-align:60px;"
    English中文
  /span
  span
    中文English
  /span
/p

给第一个span,设置60px的垂直偏移量,显示如下:

其中,黄色线就是基线(baseline),绿线和黄线的间隔即为60px。 这里会发现,容器(蓝色)的高度被撑高了。

容器的高度 height = line-height + vertical-align

当然同理,如果容器的高度被指定了,那么高度则不变,而超出的部分则不影响布局。如果设置overflow:hidden,超过的部分则不可见。

而vertical-align的其它特殊值,均可以看做一个根据容器高度而变化的相对值。

GFC

GFC(GridLayout Formatting Contexts)直译为"网格布局格式化上下文",当为一个元素设置display值为grid的时候,此元素将会获得一个独立的渲染区域,我们可以通过在网格容器(grid container)上定义网格定义行(grid definition rows)和网格定义列(grid definition columns)属性各在网格项目(grid item)上定义网格行(grid row)和网格列(grid columns)为每一个网格项目(grid item)定义位置和空间。
那么GFC有什么用呢,和table又有什么区别呢首先同样是一个二维的表格,但GridLayout会有更加丰富的属性来控制行列,控制对齐以及更为精细的渲染语义和控制。

FFC

FFC(Flex Formatting Contexts)直译为"自适应格式化上下文",display值为flex或者inline-flex的元素将会生成自适应容器(flex container),可惜这个牛逼的属性只有谷歌和火狐支持,不过在移动端也足够了,至少safari和chrome还是OK的,毕竟这俩在移动端才是王道。
Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素,而设置为 inline-flex 的容器则渲染为一个行内元素。
伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说,Flexbox 定义了伸缩容器内伸缩项目该如何布局。

转自:https://blog.csdn.net/u011472830/article/details/73010596

理解BFC、IFC、GFC、FFC 相关文章

  1. BUUOJ-[BIFCTF2020]-easy

    拿到一份exe可执行程序,按照下面步骤进行解题 1. 分析文件是否加壳等 将文件扔进exeinfope,发现为32位无壳的exe文件 2. 使用IDA进行分析 查看字符串窗口是否有敏感字符串 [Shift + F12],但是除了 can you find me 以外也没有什么其他发现 执行该程序,也

  2. LINQ教程一:LINQ简介

    一、为什么要使用LINQ 要理解为什么使用LINQ,先来看下面一个例子。假设有一个整数类型的数组,找到里面的偶数并进行降序排序。 在C#2.0以前,如果要实现这样的功能,我们必须使用'foreach'或'for'循环来遍历数组,先找到偶数然后在降序排序,相关代码如下:

  3. Volatile的简单理解

    1 谈谈对 Volatile 的理解 volatile 应用于多线程环境下; volatile 是JVM提供的轻量级的同步机制; volatile 修饰的变量 保证可见性、 不保证原子性 、禁止指令重排 可见性:多个线程操作同一个公共资源时,其中一个线程修改了这个资源,其他线程可以第一时

  4. 《面向对象》读书笔记3

    第三章 理解OOP:编程语言的历史 机器语言、汇编语言、高级语言、结构化编程、GOTO语句、全局变量、局部变量 本章介绍OOP出现之前的编程语言。 OOP结构非常简练,但另一方面也非常复杂,因此理解其结构和用途并不简单。不过,理解OOP也由捷径可循,那就是先

  5. DDD领域驱动设计实战-理解聚合(Aggregate)和聚合根(AggregateRoot)

    将实体(Entity)和值对象(ValueObject)组成聚合(Aggregate),再根据业务语义将多个聚合划定到同一个限界上下文(Bounded Context)中,并在限界上下文内完成领域建模。 聚合只是单纯将一些共享父类、密切关联的对象聚集成一个对象树吗? 如果是这样,对于

  6. 浅谈MVC+小例子

    谈谈MVC 一、个人理解 ?如果我们将数据库增删改的操作代码、业务代码、界面的html脚本代码都写在Servlet文件中,这样Servlet代码将会变得臃肿,可读性非常差,维护的时会相当麻烦。为此我们需要需找一个架构方法让代码的结构更清晰,更容易维护,MVC就是解决

  7. 回溯法

    (写于20200520) 回溯法 1、基本概念与关键理解 (1)回溯法在问题的解空间树中,按深度优先策略,从根结点出发搜索解空间树。算法搜索至解空间树的任意一点时,先判断该结点是否包含问题的解。如果肯定不包含,则跳过对该结点为根的子树的搜索,逐层向其祖先结

  8. MapSet的理解

    Set子接口 特点:无序、无下标、元素不可重复。 方法:全部继承自Collection中的方法。 Set实现类 HashSet: 基于HashCode实现了不重复。 当存入元素的哈希码相同时,会调用equals进行确认,如结果为true,则拒绝后者存入。 TreeSet: 基于排列顺序实现元素

  9. 理解MySQL的乐观锁,悲观锁与MVCC

    理解MySQL的乐观锁,悲观锁与MVCC 前提概念 数据库并发的三种场景 数据库并发场景有三种,分别为: 读 - 读 :不存在任何问题,也不需要并发控制 读 - 写 :有隔离性问题,可能遇到脏读,幻读,不可重复读 写 - 写 :可能存更新丢失问题,比如第一类更新丢失

  10. Java 基础(super关键字)

    super关键字 super 理解为: 父类的 super 可以用来调用:属性,方法,构造器 super 的使用 3.1 我们可以在子类的方法或构造器中。通过使用 "super.属性" 或 "super.方法" 的方式,显式的调用父类中声明的属性或方法。但是,通常情况下,我们习惯省略 "super.

每天更新java,php,javaScript,go,python,nodejs,vue,android,mysql等相关技术教程,教程由网友分享而来,欢迎大家分享IT技术教程到本站,帮助自己同时也帮助他人!

Copyright 2020, All Rights Reserved. Powered by 跳墙网(www.tqwba.com)|网站地图|关键词