zoukankan      html  css  js  c++  java
  • BFC与IFC浅析

    BFCIFC

    • 都是针对Box设计的formating content

    • css渲染时以box为基本单位,box的类型由元素的类型和display的值决定。box分为block-level boxinline-lever box

    • formating content:不同渲染区域遵循的规则

    BFC--块级格式化上下文
    什么时候形成?
    • overflow不为visible

    • float不为none

    • displayflex table-cell table-caption inline-block inline-flex

    • 根元素

    BFC特性
    • 区域内部的块级元素在垂直方向上,一个接着一个的放置

    • 区域不会与浮动元素重叠

    • 元素之间的距离,由垂直方向的margin决定

    • 区域内部计算高度时,浮动元素也纳入计算

    • 是一个页面上隔离的容器,内部与外部互不影响

    IFC--行内格式上下文
    • inline元素和inline-block元素符合IFC的布局规范

    特性
    • 区域中,内联元素在水平方向上一个接一个地放置。

    • 其中,水平方向上的margin, padding, border是有效的。但垂直方向上无效

    • 一个水平行中的所有行内块组成了名为line box 行框的矩形区域

    • line box的高度由其包含的元素的最高高度计算得到。有时候会高于最高元素,比如基线对齐时。当line box高度大于其中元素高度,其中的元素在垂直方向上的排列由vertical决定

    • 宽度由包含它的元素的宽度和包含它的元素中是否有浮动元素决定的。如果包含它的元素足够宽,line box的水平排布由text-align决定,否则会将line box截断并换行。如果line box无法截断,如果单词过长或指定不换行,会溢出容器。

  • 相关阅读:
    AIX中设备管理
    重置Brocade光纤交换机的管理IP地址
    博科 5300 光纤交换机配置 备份和恢复
    博科 5300 光纤交换机配置
    博科光纤交换机常用指令
    RHEL6使用系统自带多路径软件配置多路径
    Linux使用storcli工具查看服务器硬盘和raid组信息
    Linux文件管理
    Linux目录管理
    前端开发JS——jQuery常用方法
  • 原文地址:https://www.cnblogs.com/ashen1999/p/12705291.html
Copyright © 2011-2022 走看看