CSS2BFC模型和IFC模型且码且珍惜.docxVIP

CSS2 BFC 模型和 IFC 模型 且码且珍惜 对于 BFC(Block Formatting Context- 块级格式化上下 文)和 IFC(Inline Formatting Context- 行级格式化上下文 )之 前有一点点的了解，但是没有去深入。比如以前每次用 vertical-align 这个属性时，经常是无法做到垂直居中却百思 不得其解，今天整理了下相关知识记录在此。 CSS 框模型 CSS 视觉格式化模型 BFC 是什么 1. CSS 框模型 Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。CSS 框模型描述了为文档树中的元素而生成的矩形框。这些框会按照视觉格式化模 型来排列显示。 框模型 (Box model) 每个框都有一个内容区域（例如文本、图像等）及周围可选 的内边距、边框和外边距区域；每个区域的大小由以下定义 的各属性指定。下图展示了这些区域之间的关系，以及用于 描述外边距、边框和内边距片段的相关术语。外边距、边框 和内边距都可被打散为四个片段， 分别位于上、 右、下、左。 （例如，图中，“ LM”指左外边距、“ RP”指右内边距、“ TB”指上边框等）。 四个区域（内容、内边距、边框和外边距）的每一个边界被称作一个“边缘”，所以每个框都有四个边缘。 一个框之内容区域的大小，即内容宽度和内容高度，由