CSS2中的有关盒模型与布局的一些概念

CSS的一些名词和概念

用来帮你更明确地去描述HTML/CSS世界的事物。

box

在CSS中，一个元素就可以看作一个box。具体信息可以参考盒模型的解释，这里暂且不作展开。

containing blocks

Box的位置和大小时根据一个称为containing blocks的边界进行计算的。

block-level elements 和 block boxes

block-level elements 一般指HTML中的特定类型的元素，比如div，p，ul等。 block boxes 指形成一个block formatting contexts的boxes。可以确定的时正常的block-level（没有改变它的position，display等默认属性值）可以形成一个BFC。But，如果元素等display属性值为 ‘block’, ‘list-item’, 或 ‘table’中的一种，也可以对外表现出块级元素的行为。也会成为一个block box。

BFC（Block formatting contexts）

哪些情况会产生一个BFC：

  • 根元素
  • float元素（float属性不是none）
  • display： block，table-cell，table-captain，list-item， table、table-row、 table-row-group、table-header-group、table-footer-group
  • position是absolute的元素（绝对定位）
  • overflow不等于visible
  • flex 元素
  • grid 元素

在一个BFC中，形成一个独立的布局环境，里面元素等布局位置不会受外部元素影响。

IFC （Inline formatting contexts）

与BFC对应，一个行内元素默认也会形成一个IFC（行内格式化上下文）。IFC有个不同于一般的常识的特性：

当inline-level box宽度大于父容器宽度时会被拆分成多个inline-level box; 当属性direction为ltr时，margin/border/padding-left将作用于第一个的inline-level box，margin/border/padding-right将作用于最后一个的 inline-level box; 若属性direction为rtl时，margin/border/padding-right将作用于第一个的inline-level box，margin/border/padding-left将作用于最后一个的inline-level box;

<p style="margin-left:100px;margin-right:20px;border:1px dashed #ccc;">
    <span class="before"> before </span>
    <span class="cotent" style="margin-left: 100px; margin-right: 20px;"> An inline box is one that is both inline-level and whose contents participate in its containing inline formatting context. A non-replaced element with a 'display' value of 'inline' generates an inline box. Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box. </span>
    <span class="after"> after </span>
</p>

注意示例中，content 元素这段话开头和结尾的外边距大小。

在CSS2中， 一个盒子的定位模式通常是一下三种：

  • Normal flow：正常的文档流是由 BFC、IFC和position是relative的 block boxes或inline boxes 组成。
  • Floats float属性值不等于none的元素通常称之为浮动元素。
  • absolute positioning （绝对定位元素） 绝对定位的元素完全从正常的文档流中移除，它的位置不会影响它后面元素的位置。

positioned element

position属性值不是static的元素称之positioned element。

display，position和float的相对关系

我们知道，display，position和float都会对元素的布局位置表现产生影响。那么它们三者之间是如何起作用的呢？

  1. 如果display:none; position和float将不会再起任何作用；
  2. 如果position属性是absolute或fixed，则float属性置为none（可以理解为不再存在float行为，即使手动设置了float不为none）， display行为依据下表的规则展示；元素的定位会依据top/right/bottom/left进行计算。
  3. 如果float属性值不为none，则display属性依据下表的规则展示；
  4. 如果元素是根元素，则display的展示依据下表规则表现。
  5. 其它情况，依据display设定的值进行处理
指定值最终表现值
inline-tabletable
inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-blockblock
others与指定值相同