BGC GFC IFC ETC

几个概念,与相关需要挖掘细节的地方。另外再来几个布局的实例。

格式化上下文 和 盒子 算是 CSS 里最细节的概念了。

  • CSS2.1 规范中的 IFC(Inline Formatting Contexts)与 BFC(Block Formatting Contexts)
  • CSS3 新增规范,GFC(GridLayout Formatting Contexts)以及 FFC(Flex Formatting Context)。

若对这些概念存在不理解的时候,请一定要仔细阅读文档里说明的内容。 首先清楚概念,即定义,了解是怎么来的,为了解决什么?

visual formatting model

visual formatting model: how user agents process the document tree for visual media.

对于可视化的格式化上下文,基于盒模型,文档树里的每个元素生成0个或者多个盒子。这些盒子的布局通过以下几点来决定:

inline formatting context - IFC

inline formatting context

line-height

The height of a line box is determined as follows:

  • calc
    • The height of each inline-level box in the line box is calculated.
    • For replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box
    • for inline boxes, this is their 'line-height'. (See "Calculating heights and margins" and the height of inline boxes in "Leading and half-leading".)
  • The inline-level boxes are aligned vertically according to their 'vertical-align' property. In case they are aligned 'top' or 'bottom', they must be aligned so as to minimize the line box height. If such boxes are tall enough, there are multiple solutions and CSS 2.1 does not define the position of the line box's baseline (i.e., the position of the strut, see below).
  • The line box height is the distance between the uppermost box top and the lowermost box bottom. (This includes the strut, as explained under 'line-height' below.)

  • 行高的计算与 vertical-align

Block formatting contexts - BFC

BFC 老朋友了,就不多多介绍了。

grid-formatting-context - GFC

尽管 CSS grid 很强,不过就目前的兼容性,是根本不可能应用到线上代码中。所以现在不对其进行了解。

flex-formatting-context - FFC

A flex container establishes a new flex formatting context for its contents. This is the same as establishing a block formatting context, except that flex layout is used instead of block layout. For example, floats do not intrude into the flex container, and the flex container’s margins do not collapse with the margins of its contents.

除了语法上的内容, flex 具体的表现和一些特性,在此文有详细的说明。

Height

高度真是简单到不能简答的一个属性了,但是你真的了解她嘛?

<div class="par">

    <div class="child1">
      <h2>222</h2>
      <h2>vgfffdfgh</h2>
    </div>

     <div class="child2">
      <h3>dddddd</h3>
    </div>
</div>  
<style>  
 .par {
  border: 1px solid gold;
  overflow: hidden;
}

.child1 {
  border: 1px solid blue;
  float: left;
  width: 200px;
}

.child2 {
  height: 100%;
  overflow: hidden;
  border: 1px solid red;
}
</style>  

这是一个很简单的 左固定,右全宽的布局。 使用了两个 BFC : child2 触发 BFC 后,就不会与 float 区域重叠; par 创建 BFC后,其浮动的子元素得高度参与到计算中。 看似没有问题,但是 我想要两个子元素等高呢? .child2 {height: 100%} 是没有用的。 看下文档的描述:

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block.

高度的百分比计算是相对于盒子的 容器块 来计算。假如当前元素的容器块(父元素)的高度没有被指定一个准确的值(即高度只是由内容来决定),又或者当前元素不是绝对定位,那么高度会计算成 auto。【注意 css 中计算值这个概念】

absolute

https://jsbin.com/vetowihomi/edit?html,css,output

设置为 display: absolute 后,会有一个默认的 top 值,与前面的元素断行。文档没有找到说明。

https://drafts.csswg.org/css-position-3/#position-property

参考:

补充两个: