1、Box

Box 是 CSS 布局的对象和基本单位,元素的类型和 display 属性,决定了这个 Box 的类型。比较常见的有:
  • block-level box:display 属性为 block, list-item, table 的元素,会生成 block-level box。并且参与 block fomatting context;
  • inline-level box:display 属性为 inline, inline-block, inline-table 的元素,会生成 inline-level box。并且参与 inline formatting context;
块级盒的是参与块级上下文排版的一种盒子,每个块级元素都会生成这种盒子,并且参与任何有关定位的计算。盒模型结构如下:

他们分别定义了content box、padding box、border box、margin box。

2、containing block

定义:元素盒子的位置和尺寸往往是相对于一个确定的矩形计算的,我们称这个矩形为元素的包含块。
如果这个元素的position值是relative或static,这个元素的包含块是由离其最近的块级的祖先盒子的内容的边content-edge构成的。就是离其最近的块级祖先盒子的content-box。
如果position:fixed,它的CB就是ICB(initial containing block,根元素所在的containing block)。
如果position:absolute,如果不存在除static定位的父元素,则CB为ICB。否则的话:
  1. 若block container不是inline box,则其CB与这个父block container(block box/inline box/table cell)的padding box重叠。
  2. 若block container是inline box,如果 'direction' 是 'ltr',包含块的顶、左边是祖先元素生成的第一个框的顶、左内边距边界(padding edges) ,右、下边是祖先元素生成的最后一个框的右、下内边距边界(padding edges)。如果 'direction' 是 'rtl',包含块的顶、右边是祖先元素生成的第一个框的顶、右内边距边界 (padding edges) ,左、下边是祖先元素生成的最后一个框的左、下内边距边界 (padding edges)。


3、BFC

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
BFC有一些规则:
  1. 内部的Box会在垂直方向,一个接一个地放置。
  2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
  3. 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
  4. BFC的区域不会与float box重叠。
  5. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
  6. 计算BFC的高度时,浮动元素也参与计算。
触发BFC
  1. 根元素
  2. float属性不为none
  3. position为absolute或fixed
  4. display为inline-block, table-cell, table-caption, flex, inline-flex
  5. overflow不为visible
BFC应用:
  1. 两列布局。
  2. 清除内部浮动,撑开父高度。
  3. 防止两个margin重叠。

containing block和BFC的更多相关文章

  1. 由position属性引申的关于css的进阶讨论(包含块、BFC、margin collapse)

    写这篇文章的起因是源于这篇文章:谈谈面试与面试题 中关于position的讨论,文中一开始就说的这句话: 面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的 ...

  2. 我们常用,却容易忽视——CSS的BFC(Block formatting contexts)

    BFC——一个我们容易忽视掉的布局神器 今天给大家说说BFC这个概念,在说概念前,先给大家看个例子: 首先,定义三个div块元素   效果: 我们发现,块级元素的排列顺序是从上往下,一块接着一块,在w ...

  3. 【转】关于Block Formatting Context--BFC和IE的hasLayout

    转自穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为“块级格式化范围”. 是 W3C CSS ...

  4. 关于Block Formatting Context--BFC和IE的hasLayout

    转文请标明 --- 出处:穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为"块级格式 ...

  5. css Block formatting context BFC

    w3c关于BFC解释: http://www.w3.org/TR/CSS21/visuren.html#block-formatting Mdn描述: A block formatting conte ...

  6. CSS BFC(Block Formatting Context)

    BFC是 W3C CSS 2.1 规范中的一个概念Block Formatting Context的缩写即格式化上下文,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.简单讲,它是提 ...

  7. css中margin重叠和一些相关概念(包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes )

    平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外 ...

  8. 什么是BFC(Block Formatting Context)

    原文:https://segmentfault.com/a/1190000012221820 https://www.w3.org/TR/CSS2/visuren.html#block-formatt ...

  9. BFC (Block formatting context)

     一:BFC 是什么      MDN解释: A block formatting context is a part of a visual CSS rendering of a Web page. ...

随机推荐

  1. STS安装

    在eclipse中安装spring tool Suite插件需要根据eclipse版本找到对应的spring tool Suite安装包. spring tool Suite 官网地址:http:// ...

  2. 初识oracle存储过程

    参见:http://www.cnblogs.com/linjiqin/archive/2011/04/16/2018411.html 1.存储过程的语法结构: CREATE OR REPLACE PR ...

  3. JavaScript简易计算器

    JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标 ...

  4. Java的基本程序设计结构【2】

    注释 与大多数程序设计语言一样,Java 中的注释也不会出现在可执行程序中.因此,可以在源程序中根据需要添加任意多的注释,而不必担心可执行代码会膨胀.在Java 中,有三种书写注释的方式. 最常用的方 ...

  5. 在Ubuntu上安装arm-linux-gcc的问题

    由于之前将Ubuntu的更新关掉了,所以导致我下载32位兼容包一直出错. 在arm-linux-gcc 安装之后,还不能编译程序的话,首先看自己的系统是多少位的,因为网上大部分的安装包都是32位的,所 ...

  6. Python GUI - Tkinter tkMessageBox

    Python GUI - Tkinter tkMessageBox: tkMessageBox模块用于显示在您的应用程序的消息框.此模块提供了一个功能,您可以用它来显示适当的消息     tkMess ...

  7. iOS开发注意事项(一)

    1.OC的消息机制与C++等的函数(方法)有很大的不同,OC在运行时所执行的代码由运行环境来决定,而C++等则由编译器决定.如果调用的函数是多态的,C++在运行时要按照虚方法表来查出到底执行哪个函数, ...

  8. python web框架之Tornado

    说Tornado之前分享几个前端不错的网站: -- Bootstrap http://www.bootcss.com/ -- Font Awesome http://fontawesome.io/ - ...

  9. HDU2089 暴力打表

    62的判断就是倒过来没有26 hdu2089 #include<cstdio> #include<cstdlib> #include<iostream> #incl ...

  10. js系列教程2-对象、构造函数、对象属性全解

    全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...