[css学习笔记] 可视化格式模型和vertical-align

Posted on | In ,

可视化格式模型

visual formatting model
在可视化格式模式中，文档树中的每个元素都会根据盒子模型(box model)生成零到多个框，这些盒子的布局由以下几点决定

  • box dimensions and type. //盒子的类型
  • positioning scheme (normal flow, float, and absolute positioning). //定位
  • relationships between elements in the document tree. //元素与文档树的关系
  • external information (e.g., viewport size, intrinsic dimensions of images, etc.). //其他

Block-level elements and block boxes

display：’block’, ‘list-item’, and ‘table’.

Block-level boxes that are also block containers are called block boxes.

即Block-level boxes和block boxes是一样的

Inline-level elements and inline boxes

  • Inline-level elements
    display： ‘inline’，’inline-table’和’inline-block’

但是！请注意，inline-level elements生成的是inline-level box，而inline-level box并不代表是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.

不是inline box的inline-level boxes被称为atomic inline-level boxes(原子内联级元素?原谅我的辣鸡翻译..)，比如：replaced inline-level elements（即inline-level的置换元素）,inline-block elements和inline-table elements(还是英文比较容易理解..)所以display:inline-block并不会生成inline box！

  • inline box

    A non-replaced element with a ‘display’ value of ‘inline’ generates an inline box.

因此，要想把元素变为inline box，该元素需要是非替换元素(详情可以看这里)要把display值设置为inline。
在同一行的inline box会被同一个line box包裹着。

Positioning schemes

  • Normal flow
    • block formatting of block-level boxes //块格式上下文
    • inline formatting of inline-level boxes //内联格式上下文
    • relative positioning of block-level and inline-level boxes. //定位为relative的元素
  • Floats.
  • Absolute positioning.
  • 块格式上下文 block formatting of block-level boxes
    浮动，绝对定位的元素，块容器（如inline-blocks,table-cells,table-captions）并不是block box，而是由具有除了display为visible的块框为其内容建立新的块格式上下文。
    块格式化上下文中相邻块级别框之间的垂直margin折叠。

  • 浮动 float
    一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
    浮动元素之后的元素将围绕它。
    浮动元素之前的元素将不会受到影响。

    Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.

    浮动元素并不在文档流中(这也就是为什么父元素容易出现高度坍塌的原因)，所以没有定位的块元素位置不会收到影响，但是相邻的line box就会在浮动元素之后被创建，而且它的宽度可能会减小以满足浮动元素margin box所需的空间，而真的没有空间了，该line box就会移至下一行

    • 大名鼎鼎的clear:both
      可能很多人都不知都它有什么用的，只知道clear:both清除浮动，并能解决大部分奇难杂症，比如父元素高度坍塌。那么它的实现原理是什么呢？现在我们先来看看clear有哪些属性值~
      clear: none | left | right | both | inherit
      该属性是让元素的某条边不与前面的浮动框相邻，但不会作用于该元素内部浮动元素。也可以简单理解为清除左/右/全部浮动，但不是很准确。
      因为它除了能解决高度坍塌问题之外，还可以实现垂直环绕布局，例子可以戳这里。张鑫旭老师的例子中两张float：left的图片本应一起并排浮动到左边，但当第二张图片clear:left的时候，第二张图片就会落在第一张图片的正下方，也就文档中对clear的描述：让元素的某条边不与前面的浮动框相邻。

position

  • relative
    relative元素会以上述normal flow中的元素位置定位
  • absolute
    脱离文本流，相对于relative元素进行定位
  • fixed & static & inherit
  • top left right bottom
    该定位元素的margin值离其包含框的对应方向的边的偏移值

display 和 position 和 float的关系

当position为absolute和fixed时，float不起作用，其位置将有top left right bottom决定
三者的表现效果可以看一下文档，里面配合着代码和讲解图会解释得比较详细~