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与指定值相同