FC格式化(二十三)

FC格式化上下文

FC: Formatting Contexts,是w3c css2.1规范中的一个概念.

相当于页面中的渲染区域,并且有一套渲染规则,决定其子元素将如何定位,以及和其他元素的关系和相互作用

BFC: 块级格式化上下文.

Block Formating Contexts 就是页面上的一个隔离的渲染区域,容器里面的子元素不会布局上影响到外面的元素.

• 形成条件

  1.根元素;

  2.float属性不为none;

  3.position为absolute或者 fixed;

  4.display为inline-block/table-cell/table-caption(开启表格里面的渲染规则,)flex,inline-flex

  5.overflow 不为visible(hidden/auto/scroll).

  通俗来讲,形成一个独立的大箱子,箱子中的元素与外部元素隔绝,内部形成一个独立的文档流.

• BFC的主要用途: 清除浮动影响,处理外边距合并以及穿透,实现两栏/三栏自适应布局,平常margin尽量少用.

IFC:内联格式化上下文

IFC的line box线框高度由其行内元素中最高的实际高度计算而来,不受padding/margin影响.

FFC 自适应格式化上下文

其实就是平常用的 display:flex 或者inline-flex 的元素将会生成自适应容器,Flex Box由伸缩容器和伸缩项目组成.

GFC 网格布局格式化上下文

设置 display: grid; 的时候,此元素会获得一个独立的渲染区域.不常用.

iframe 内联框架 (了解)

可以将另一个网页通过iframe框架引入到当前页面

<iframe width='200' height='200' src='http://www.baidu.com/'></iframe>

属性	值	描述
width	px*%*	定义 iframe 的宽度。
height	px*%*	规定 iframe 的高度。
frameborder	1 || 0	规定是否显示框架边框
name	frame_name	规定 iframe 的名称。
scrolling	yesnoauto	规定是否在 iframe 中显示滚动条。
seamless	seamless	规定 看上去像是包含文档的一部分。
src	URL	规定在 iframe 中显示的文档的 URL。
srcdoc	HTML_code	规定在 中显示的页面的 HTML 内容。