zoukankan      html  css  js  c++  java
  • BFC、IFC、FFC、GFC

    FC(Formatting Context)

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

    BFC(block formatting context)

    直译为“块级格式化上下文”

    W3C原文:

    Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

    In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

    In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

    整理为中文:

    1. 内部的Box会在垂直方向,一个接一个地放置。

    2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

    3. 每个元素的左外边缘(margin-left), 与包含块的左边(contain box left)相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。除非这个元素自己形成了一个新的BFC。

    4. BFC的区域不会与float box重叠。

    5. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。

    6. 计算BFC的高度时,浮动元素也参与计算

    IFC(inline formating context)

    直译为“内联格式化上下文”,IFC的line box(线框),高度由其包含行内元素中最高的实际高度计算而来(不受垂直方向的padding/margin影响)。

    在行内格式化上下文中,框(boxes)一个接一个地水平排列,起点是包含块的顶部。水平方向上的 marginborder 和 padding在框之间得到保留。框在垂直方向上可以以不同的方式对齐:它们的顶部或底部对齐,或根据其中文字的基线对齐。包含那些框的长方形区域,会形成一行,叫做行框。

    FFC(flxe formating context)

    直译为“自适应格式化上下文”,display值为flex或者inline-flex的元素将会生成自适应容器(flex container)。

    GFC(GridLayout formating context)

    直译为“网络布局格式化上下文”,当为一个元素设置display值为grid的时候,此元素将会获得一个独立的渲染区域,我们可以通过在网格容器(grid container)上定义网格定义行(grid definition rows)和网格定义列(grid definition columns)属性各在网格项目(grid item)上定义网格行(grid row)和网格列(grid columns)为每一个网格项目(grid item)定义位置和空间。

  • 相关阅读:
    Tomcat安装(安装版)
    Selenium自动化测试(一)之环境搭建
    Windows快速启动应用高效搜索文件工具-Listary
    Python3之jsonpath使用和json转换
    Python3操作SQLite数据库
    初识面向对象
    忘记虚拟机中Linux的登录密码解决办法
    win10自带虚拟机的使用(Hyper-v)
    nigx下配置tp5.1路由
    PHP无限极菜单
  • 原文地址:https://www.cnblogs.com/amiezhang/p/11564364.html
Copyright © 2011-2022 走看看