zoukankan      html  css  js  c++  java
  • css中bfc和ifc

    bfc
    定义:块级格式化上下文,他是一个独立的渲染区域,他规定了这个内部如何布局,并且与这个区域的外部毫不相干。
    BFC布局规则:

    内部的Box会在垂直方向,一个接一个地放置。
    Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
    每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
    BFC的区域不会与float box重叠,常用来清除浮动和布局。
    BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
    计算BFC的高度时,浮动元素也参与计算

    生成bfc的元素有哪些:
    float的属性不为none
    position为absolute和fixed
    overflow不为none
    display为inline-block,table-cell,flex,inline-flex
    ifc
    定义:行内格式化上下文
    IFC布局规则:

    框会从包含块的顶部开始,一个接一个地水平摆放。
    摆放这些框的时候,它们在水平方向上的外边距、边框、内边距所占用的空间都会被考虑在内。在垂直方向上,这些框可能会以不同形式来对齐:它们可能会把底部或顶部对齐,也可能把其内部的文本基线对齐。能把在一行上的框都完全包含进去的一个矩形区域,被称为该行的行框。水平的margin、padding、border有效,垂直无效。不能指定宽高。
    行框的宽度是由包含块和存在的浮动来决定。行框的高度由行高计算这一章所描述的规则来决定。
    行框一定会高到足以容纳它所包含的全部框。然而,它也可能比它所包含的最高的框还要高(例如:这些框是以基线对齐)。当框 B 的高度小于包含它的行框时,则 B 在行框中垂直对齐的位置由’vertical-align’ 属性来决定。当几个行级框在水平方向上无法塞得进同一个行框时,它们会被分布在两个或多个垂直堆放的行框中。行框会以既没有垂直间距 也没有重叠的方式被垂直堆放起来。

    通常,行框的左边紧贴其包含块的左边,而行框的右边紧贴其包含块的右边。然而,浮动框可以插在包含块边缘与行框边缘之间。因此,尽管在同一个IFC中的行框通常有同样的宽度(也就是其包含块的宽度),但它们的宽度也可能受浮动让水平可用空间减少的影响而有所改变。在同一个IFC中,行框的高度通常是变化的(例如:某一行包含了一个比较高的图片,而其它行只包含文本)。

    当一行上的行级框的总宽度小于包含它们的行框的宽度,则它们在行框内的水平分布由’text-align’属性来决定。

    当一个行内框的宽度超过了行框的宽度,则它会被分割成几个框,而这些框会分布在几个行框。如果此行内框不可分割(例如:单个字符、或语言指定的文字打断规则不允许在此行内框中出现打断、或该行内框受 white-space 属性为 nowrap或 pre 的影响),那么该行内框溢出该行框。

    行内框被分割的时候,外边距、边框和内边距在出现分割的地方都没有视觉效果。
    **行高计算 ― ‘line-height’ 与 ‘vertical-align’ 属性**
    计算行框里的各行内级框的高度。对于置换元素、行内块元素、行内表格元素来说,这是边界框的高度,对于行内框来说,这是其 ‘line-height’。
    行内级元素根据其 ‘vertical-align’ 属性垂直对齐。
    行框的高是最顶端框的顶边到最底端框的底边的距离。

  • 相关阅读:
    Python 学习笔记 11.模块(Module)
    Python 学习笔记 8.引用(Reference)
    Python 学习笔记 9.函数(Function)
    Python 学习笔记 6.List和Tuple
    Python 学习笔记 4.if 表达式
    Python 学习笔记 2.自省
    Python 学习笔记 3.简单类型
    Python 学习笔记 7.Dictionary
    Python 学习笔记 5.对象驻留
    Python 学习笔记 10.类(Class)
  • 原文地址:https://www.cnblogs.com/eer123/p/6946936.html
Copyright © 2011-2022 走看看