前端开发页面布局必须用到Formatting context,你确实在用,只不过你不知道而已,例如面试经常遇到的BFC-块级格式化上下文,就是其中一个渲染规则,准确的说Formatting context就是前端css渲染规则的全称!

css中的渲染规则:Formatting context,你100%用过它,可惜你不知道!-Qui-Note

一.概念定义:

Formatting context是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系、相互作用。

二.常见类型

到目前css3为止,css渲染规则有四种常见类型:

  • BFC-块级格式化上下文(Block formatting contexts)
  • IFC-行内格式化上下文(Inline formatting contexts)
  • FFC-弹性格式化上下文(Flex Formatting Contexts)
  • GFC-网格布局格式化上下文(GridLayout Formatting Contexts)

 
看到这里,你是不是突然明白了常用的display:flex/display:block/display:grid...原来还有这一层深意,是不是有种恍然大明白的感觉?