原文

  简书原文:https://www.jianshu.com/p/20c32c367b63

什么是格式化上下文(formatting contexts)

  Formatting context是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系、相互作用。
格式化上下文指的是初始化元素定义的环境。包含两个要点,元素定义的环境和初始化。
  在 CSS 中,元素定义的环境有两种,一种是块格式化上下文( Block formatting context ),另一种是行内格式化上下文( Inline formatting context )。 这两种上下文定义了在 CSS 中元素所处的环境,格式化则表明了在这个环境中,元素处于此环境中应当被初始化,即元素在此环境中应当如何布局等。

格式化上下文包含以下几种情况

  a:块级格式化上下文( Block formatting contexts )( BFC )
  b:行内格式化上下文( Inline formatting contexts ) ( IFC )
  c:自适应格式化上下文( Flex Formatting Contexts )( FFC )(CSS3新增)
  d:网格布局格式化上下文( GridLayout Formatting Contexts )( GFC )(CSS3新增)

BOX:CSS布局的基本单位

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

最新文章

  1. 2016-12-15 java开发工作中,尚未做的工作
  2. Liferay7 BPM门户开发之42: Liferay核心JSP定制扩展
  3. R树空间索引
  4. JAVA 单选按钮、复选按钮
  5. Gof-23种设计模式名称列表
  6. Android - 折线图
  7. Java基础知识强化之IO流笔记07:自定义的异常概述和自定义异常实现
  8. Domain Shutdown Error(JBAS010850)
  9. Qt程序Windows部署前打包方法
  10. gulp+browserfy模块化工具环境搭建
  11. gitlab应用
  12. Mac安装Homebrew
  13. ThinkPHP 数据库操作(六) : 查询事件、事务操作、监听SQL
  14. 数据库主库从库宕机重启后binlog数据同步
  15. Linux中安装mongodb
  16. lambda 匿名函数
  17. javascript进阶笔记(2)
  18. 委托、Lambda表达式、事件系列05,Action委托与闭包
  19. PHP在win7安装Phalcon框架
  20. ElasticSearch搜索引擎在JavaWeb项目中的应用

热门文章

  1. jq实现回车键执行方法
  2. seq---生成随机数
  3. Web前端开发实战4:导航菜单(一)
  4. ListView- 最后一行添加控件
  5. 基于jQuery的楼层案例
  6. POJ 1654 Area 凸包面积
  7. Redux简易理解
  8. Jmeter使用_处理响应结果显示乱码
  9. Python Unittest模块测试执行
  10. ED/EP系列1《简单介绍》