学习BFC、IFC、FFC、GFC

  FC(Formatting Context)格式化内容,常见的FC有BFC、IFC、FFC、GFC四种类型,BFC和IFC是W3C CSS2.1规范提出的概念,FFC和GFC是W3C CSS3规范提出的概念,其实就是定义了一套页面渲染的规则,决定了盒子以什么样的方式渲染从而占据什么样的位置区域,本文只是简单的学习笔记以供参考。

  想要弄懂FC,首先得弄清楚盒子模型,常见的两种盒子模型为:

IE盒子模型(怪异模式):

  width = content-width + padding-width + border-width;

  height = content-height + padding-height + border-height;

W3C盒子模型(标准):

  width = content-width;

  height = content-height;

  IE总是与众不同,让人精疲力尽,好在IE8开始支持CSS3的属性box-sizing:padding-box/content-box/inherit;有了这个属性,我们在布局时就游刃有余了,其实这些都是基于BFC的,下面开始进入正文:

BFC(Block formatting contexts):

  Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with ‘overflow‘ other than ‘visible‘ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

  总结要点如下:

  • float 的值不为 none
  • position 的值不为 static 或 relative
  • display 的值为 table-cell、table-caption、inline-block、flex 或 inline-flex
  • overflow 的值不为 visibility

  特点:

  • 块盒子垂直排列,垂直方向上在外边距上会进行塌陷,以大的外边距为二者之间的距离
  • 浮动的块盒子左右外边距也会发生同样的塌陷,以大的外边距为二者之间的距离

IFC(Ininle formatting contexts):

  In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box.

  总结要点如下:

  • 水平方向上排列
  • 行盒子以不同的方式水平对齐,文字的话一般以文字的基线对齐
  • 还有一种特殊的类型是在块盒子里包含着行盒子称作inline-block

  特点:

  • 没有宽度和高度

FFC(Flex formatting contexts):

  Made up of telescopic containers and telescopic items. You can get a telescopic container by setting the display attribute of the element to flex or inline-flex. Containers set to flex are rendered as a block level element, while containers that are set to inline-flex are rendered as inline elements.

  总结要点如下:

  • 自适应上下文,俗称弹性盒模型
  • display属性值为flex或inline-flex时即可实现块盒子和行盒子

  特点:

  • 可伸缩性的盒子,盒子内外都不受影响,任意实现复杂布局

GFC(Gird formatting contexts):

  When set to a display element value of grid, this element will get an independent rendering area, we can in the grid container (grid container) defined on the grid definition line (grid definition rows) and grid (grid definition columns) as defined in the attributes of each grid project (grid item) on the definition the grid line (grid row) and grid column (grid columns) for each grid project (grid item) defines the location and space.

  总结要点如下:

  • 网络式布局,真正的二维空间布局
  • display属性值为gird时即可实现网络布局,在网格容器的行列上再次进行行列布局

  特点:

  • 二维布局,适用于超级复杂的两个维度布局

  常用的四种布局方式,要知其然并知其所以然,CSS规范博大精深,前端路上还需不断学习巩固加深!

时间: 2024-10-20 08:01:34

学习BFC、IFC、FFC、GFC的相关文章

什么是BFC、IFC、GFC和FFC

什么是BFC.IFC.GFC和FFC CSS2.1中只有BFC和IFC, CSS3中才有GFC和FFC. FC的全称是:Formatting Contexts,是W3C CSS2.1规范中的一个概念.它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用. BFC BFC(Block Formatting Contexts)直译为"块级格式化上下文".Block Formatting Contexts就是页面上的一个隔离的渲染区域,容器

【转】前端的BFC、IFC、GFC和FFC

什么是BFC.IFC.GFC和FFC CSS2.1中只有BFC和IFC, CSS3中才有GFC和FFC. FC的全称是:Formatting Contexts,是W3C CSS2.1规范中的一个概念.它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用. 1.BFC* BFC(Block Formatting Contexts)直译为"块级格式化上下文".Block Formatting Contexts就是页面上的一个隔离的渲染区域

重拾 BFC、IFC、GFC、FFC

温故知新,巩固基础 从 FC 开始 FC,Formatting Context,格式化上下文,是 W3C CSS2.1 规范中的一个概念,定义的是页面中一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,及和其他元素的关系和相互作用. 常见的FC有:BFC(Block Formatting Context | 块级格式化上下文)和IFC(Inline Formatting Context | 行内格式化上下文). 其次还有:GFC(GridLayout Formatting Conte

css3之BFC、IFC、GFC和FFC

CSS2.1中只有BFC和IFC, CSS3中才有GFC和FFC. What's FC?一定不是KFC,FC的全称是:Formatting Contexts,是W3C CSS2.1规范中的一个概念.它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用. BFCBFC(Block Formatting Contexts)直译为"块级格式化上下文".Block Formatting Contexts就是页面上的一个隔离的渲染区域,容器里面

BFC,IFC,GFC,FFC的定义及功能

What's FC?一定不是KFC,FC的全称是:Formatting Contexts,是W3C CSS2.1规范中的一个概念.它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用. BFCBFC(Block Formatting Contexts)直译为"块级格式化上下文".Block Formatting Contexts就是页面上的一个隔离的渲染区域,容器里面的子元素不会在布局上影响到外面的元素,反之也是如此.如何产生BFC?

css3中的BFC,IFC,GFC和FFC(转载)

作者原文网址:http://www.cnblogs.com/dingyufenglian/p/4845477.html   What‘s FC? 一定不是KFC,FC的全称是:Formatting Contexts,是W3C CSS2.1规范中的一个概念.它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用. BFC BFC(Block Formatting Contexts)直译为"块级格式化上下文".Block Formattin

css布局的各种FC简单介绍:BFC,IFC,GFC,FFC

什么是FC? Formatting Context,格式化上下文,指页面中一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素的相互关系和作用. BFC 什么是BFC Block Formatting Context,块级格式化上下文,一个独立的块级渲染区域,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关. BFC的约束规则 内部的BOX会在垂直方向上一个接一个的放置: 垂直方向上的距离由margin决定.(完整的说法是:属于同一个BFC的俩个相邻的BOX的ma

BFC、IFC、GFC和FFC

基本概念 Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个Box 组成的.元素的类型和 display 属性,决定了这个 Box 的类型. 不同类型的 Box, 会参与不同的 Formatting Context(一个决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染.让我们看看有哪些盒子: block-level box:display 属性为 block, list-item, table 的元素,会生成 block-levelbox.并且参与 bl

CSS3/BFC/IFC

SCC3边框 1.给边框添加圆角:     <!DOCTYPE html>     <html>     <head>     <style>      div{     text-align:center;[文本为水平方向对其,居中]     border:2px solid #a1a1a1;     padding:10px 40px; [内边距间距为上下和左右]     background:#dddddd;     width:350px;[宽度]