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。否则的话:
- 若block container不是inline box,则其CB与这个父block container(block box/inline box/table cell)的padding box重叠。
- 若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有一些规则:
- 内部的Box会在垂直方向,一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
- 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时,浮动元素也参与计算。
触发BFC
- 根元素
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
BFC应用:
- 两列布局。
- 清除内部浮动,撑开父高度。
- 防止两个margin重叠。