Redbattle
踩坑
环境
项目
配置
知识点
踩坑
环境
项目
配置
知识点
  • 浏览器/网络
  • HTML
  • CSS
  • JS
  • Vue
  • ES6
  • TS
  • 格式化上下文
    • 工程化
    • 常用 Web 坐标转换
    • 算法
    • 安全性
    • CSS 选择器
    • CSS 函数
    • CSS 属性
    • CSS @
    • CSS 过渡与动画
    • CSS 预处理器
    • knowledge
    2024-07-18

    格式化上下文

    # BFC

    • 块级格式化上下文,是页面的一块隔离渲染区域;子元素与外界元素互不影响;BFC 不会与 float 区域重合,计算高度会包含浮动。
      • 内部的 Box 会在垂直方向,一个接一个地放置。
      • Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
      • 每个元素的 margin box 的左边, 与包含块 border box 的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
      • BFC 的区域不会与 float box 重叠。
      • BFC 就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
      • 计算 BFC 的高度时,浮动元素也参与计算
    • 产生条件:
      • 根元素
      • float 不为 none
      • overflow 不为 visible
      • position 为 absolute、fixed
      • display 为 table-cell、table-caption、inline-block、flex

    # IFC

    • 内联格式化上下文,高度是元素中最高的实际高度,不受竖直方向的 padding、margin 影响
    • inline 元素边缘是 content-box
    • inline-block 边缘是 margin-box,元素基线,如果有内容与内容对齐,如果多行内容与最后一行内容对齐,如果没有内容与下边界对齐

    # FFC

    # GFC

    最近更新
    01
    烧虾球
    05-13
    02
    二次开发
    12-20
    03
    文字展开收起
    10-17
    更多文章>
    Theme by Vdoing
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式