BFC、IFC、GFC、FFC

BFC、IFC、GFC、FFC

BFC

概念(BFC)

  "块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。

规则(BFC)

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

产生(BFC)

  • float的值不为none。
  • overflow的值不为visible。(这个是最推荐开启bfc的,副作用最小)
  • position的值不为relative和static。
  • display的值为table-cell, table-caption, inline-block中的任何一个。

使用场景(BFC)

  • 自适应两栏布局
  • 清除内部浮动
  • 防止margin重叠

IFC

概念(IFC)

  "内联格式化上下文",IFC的line box(线框)高度由其包含行内元素中最高的实际高度计算而来(不受到竖直方向的padding/margin影响)
  IFC中的line box一般左右都贴紧整个IFC,但是会因为float元素而扰乱。float元素会位于IFC与与line box之间,使得line box宽度缩短。 同个ifc下的多个line box高度会不同。 IFC中时不可能有块级元素的,当插入块级元素时(如p中插入div)会产生两个匿名块与div分隔开,即产生两个IFC,每个IFC对外表现为块级元素,与div垂直排列。

规则(IFC)

  • 盒子一个接一个地水平摆放,当容器宽度不够时就会换行
  • 在水平方向上,这些盒的外边距、边框、内边距所占用的空间都会被计算,但行内盒的垂直的border,padding 与 margin 都不会撑开行盒的高度
  • 在垂直方向上,这些盒可能会以不同形式来对齐,可通过 vertical-align 来设置,默认对齐为 baseline
  • 每一行将生成一个行盒(line box),包括该行所有的盒子,行盒的宽度是由包含块和存在的浮动来决定
  • 行盒一般左右边都贴紧其包含块,但是会因为浮动盒(float 元素)的存在而发生变化。浮动盒会位于包含块边缘与行盒边缘之间,这样行盒的可用宽度就小于包含块的宽度
  • 当所有盒的总宽度小于行盒的宽度,那么行盒中的水平方向排版由 text-align 属性来决定
  • 当所有盒的总宽度超过一个行盒时,就会形成多个行盒,多个行盒相互之间垂直方向不能分离,不能重叠
  • 当一个行内盒超过行盒的宽度时,它会被分割成多个盒,这些盒被分布在多个行盒里。如果一个行内盒不能被分割(比如只包含单个字符,或word-breaking机制被禁用,或该行内框受white-space属性值为nowrap或pre的影响),那么这个行内盒将溢出这个行盒
  • 当一个行内盒发生分割时,分割处的 margins, borders 和 padding 不会有任何视觉效果(或者其他任何分裂,只要是有多个行盒)
  • 行盒的高度由内部元素中实际高度最高的元素计算出来。每个行盒的高度由于内容不一样,所以高度也可能不一样
  • 在一个行盒中,当他包含的内部容器的高度小于行盒的高度的时候,内部容器的垂直位置可由自己的 vertical-align 属性来确定

  注:在 IFC 的环境中,是不能存在块级元素的,如果将块级元素插入到 IFC 中,那么此 IFC 将会被破坏掉变成 BFC,而块级元素前的元素或文本和块级元素后的元素或文本将会各自自动产生一个匿名块盒其包围。

使用场景(IFC)

  • 水平居中:当一个块要在环境中水平居中时,设置其为inline-block则会在外层产生IFC,通过text-align则可以使其水平居中。
  • 垂直居中:创建一个IFC,用其中一个元素撑开父元素的高度,然后设置其vertical-align:middle,其他行内元素则可以在此父元素下垂直居中。

GFC

概念(GFC)

  "网格布局格式化上下文"又称网格布局(display:grid )

FFC

概念(FFC)

"自适应格式化上下文"(display:flex)


 上一篇
flex flex
flex概念  采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。   块状元素display:flex;行内元素d
2018-04-15
下一篇 
margin margin
margin外边距  取值顺序一般是上、右、下、左 /* 上10 右5 下15 左20 */ div{ margin:10px 5px 15px 20px; } /* 上10 右5 下15 左5 */ div{ margin:10p
2018-04-13
  目录