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无法截断,如果单词过长或指定不换行,会溢出容器。

  • 相关阅读:
    spring读取配置文件内容并自动注入
    xshell免费下载安装使用
    cas sso原理
    sql两列相除,保留n位小数
    mysql 报zone什么的错误
    mysql union出错: "Every derived table must have its own alias"
    mysql jdbc操作
    sql 对某列取值进行if判断
    Python深入:02浅拷贝深拷贝
    Python基础:22__slots__类属性
  • 原文地址:https://www.cnblogs.com/ashen1999/p/12705291.html
Copyright © 2011-2022 走看看