Basic Visual Formatting

最近看了看CSS, 看到CSS权威指南第三版已经是十年前出版的了,相比CSS3的内容不会有多少, 于是去搜了一下, 第四版正在出, O社已经有了Early版的PDF卖了, 其实我不想买的, 贵得要死. 奈何搜了半天都找不到哪里有下载, 只好买了一本. 不过还好找了个优惠券, 折价50%. 以下是"基本视觉可视化"一章的读书笔记.

视觉可视化模型是CSS用来处理文档并将文档显示在视觉媒体上的机制. 视觉可视化模型根据CSS盒模型为文档的每个元素生成0, 1或者多个盒子. 然后将这些盒子根据若干规则显示出来.

Basic Boxes

The position and size of an element's box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element. The containing block of an element is defined as follows:

  1. The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin; it is the page area for paged media. The 'direction' property of the initial containing block is the same as for the root element.
  2. For other elements, if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest block container ancestor box.
  3. If the element has 'position: fixed', the containing block is established by the viewport in the case of continuous media or the page area in the case of paged media.
  4. If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', in the following way:
    1. In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element. In CSS 2.1, if the inline element is split across multiple lines, the containing block is undefined.
    2. Otherwise, the containing block is formed by the padding edge of the ancestor.
    3. If there is no such ancestor, the containing block is the initial containing block.

对于常规流里的元素来说, 它的CB就是它最近的block contrainer祖先的box.

像以下这种结构, img的CB是div盒子的内容区.

```html
<div>
    <img src="demo.jpg" alt="">
</div>
```

Block-Level Elements

水平格式化

垂直格式化

特殊的block element: list items

列表项有个符号, 视觉模型根据list-style-position属性来决定是否将符号放入到元素的content区域.

且不论这个属性是inside还是outside值, 列表符号和内容之间都有一个固定的间隔, 这个间隔无法通过css规则进行改写.

Inline Elements

行布局

了解视觉格式化模型怎么处理块级元素后, 我们来看看行内元素. 最简单的情况下, 格式化模型会根据容器的宽度来对行内元素断行, 使得各部分能适应容器的宽度正好放下. 不过, 行内格式化模型远没那么简单.

术语和概念

CSS 还有一组行为:

视觉格式化模型通过以下步骤确定当前行中各元素inline box的高度:

  1. 通过font-size和line-height得到非可替换元素的em box+leadding.
  2. 通过垂直方向的七大金刚的值, 得到可替换元素的inline box.
  3. 确定非可替换元素的内容区各自超出基线多少. 另外还把可替换元素的底边放在整行的基线上.
  4. 根据vertical-align对inline box进行调整.
  5. inline box摆放完毕, 得到line box.

行内格式化

所有的元素都有line-height属性. 但是这个属性不会直接影响块级元素. 只会对行内元素, 或者块级元素内的行内元素有影响.

CSS规范这么说: 在块级元素上声明line-height会为该块级元素的内容设置一个最小行框高度. (为什么是最小? 因为没有什么办法可以减少行高了, 不可替换元素的padding, margin在垂直方向上没效果. 在可替换元素上设定负margin可以减少行高吗?)

行内Nonreplaced Elements

可以在css里利用line-height: 1em来避免行与行之间的文字重叠到一起. 但是一般情况下, 由于字体çem box和它的字形并不等高, 因此1em的line-height其实没那么管用, 最好还是设置1.2左右, 极端字体会去到3.1. 参考博文

行内Inline Replaced Elements

Altering Element Display

第四版的权威指南把这节给打散了, 结构性其实还没有第三版那么好.

疑问: 什么在div上设置line-height为内部图片的高度, div的高度不等于line-height?