CSS格式化上下文

[mbaxszy7]

整理一下CSS格式化上下文

CSS格式化上下文主要有这么几种： BFC块级格式化上下文、IFC内联格式化上下文、GFC网格（grid）格式化上下文、FFC弹性（flex）格式上下文

GFC网格（grid）格式化上下文

创建规则：display:grid/inline-grid

FFC弹性（flex）格式上下文

创建规则： display:flex/inline-flex

下面主要整理一下BFC块级格式化上下文 和 IFC内联格式化上下文

BFC块级格式化上下文

• 创建规则：

1. 根元素html
2. 浮动元素
3. 绝对定位元素(position为absolute或fixed)
4. display： inline-block，table-caption, table-cell
5. overflow 不为visible
   注意： 是这些元素创建了块格式化上下文，它们本身可以不是块格式化上下文

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

• 以上几条规则总结如下：

  如果一个元素具有 BFC，内部子元素再怎么倒腾，都不会影响外部的元素。
  所以，
  1. BFC 元素是不可能发生 margin 重叠的，因为 margin 重叠是会影响外部的元素的；
  2. BFC 元素也可以用来清除浮动的影响，因为如果不清除，子元素浮动则父元素高度塌陷，必然会影 
      响后面元素布局和定位，这显然有违 BFC 元素的子元素不会影响外部元素的设定

所以BFC可以用来防止外边距合并，清除内部浮动

IFC内联格式化上下文

• 创建规则： IFC 只有在一个块元素中仅包含内联级别元素（inline-level elements）时才会生成

• 内联级元素（inline-level elements）在一行中一个挨一个地排列，一旦当前行放不下了，就在它下方创建一个新行，所有这些行都是所谓的行盒（line box），用来包住这一行的所有内容。

• inline-level element (内联级元素)。内联级元素包括 display属性计算值为:

  1. inline 内联元素一般是用来包裹文本的元素，比如span、strong、em标签等。所有 display:inline 的非替换元素生成的盒是行内盒（Inline-level boxes）
  2. inline-block 内联-块元素（内嵌的块元素）可以在一行中排列显示，以具有width，height（也有 可能是通过其内容确定的）和padding，border及margin。比如img、input标签等

• 使用IFC，可以实现内联级元素的垂直和水平居中

  1. 使用一个块元素来包含一个内联元素，这样会生成一个IFC来规定如何渲染行内元素。按照IFC行内框的布局规则，其水平位置将由text-align属性来确定，所以设置text-align:center将把行内框居中
  2. 不同大小的的元素意味着不等高的行盒（line box）。在每一个line box中，我们都可以使用vertical-align来对齐line box之中的元素。
  3. line box 中vertical-align的运用：
     • vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。
       vertical-align属性可被用于两种环境：
       1. 使行内元素盒模型与其行内元素容器垂直对齐。例如，用于垂直对齐一行文本的内的图片
       2. 垂直对齐表格单元内容
     • 如果有子元素超过了父元素的高度，那么父元素的高度就是被撑高的高度， 且始终保持最高元素 的对齐方式是正确的