CSS规范里的一些事(一)

CSS规范里的一些事

前言：以下内容总结于CSS2.1规范，http://www.ayqy.net/doc/css2-1/cover.html

一、盒子模型

以上图形说的是盒子模型中的content、padding、border、margin边界。

1. 样式

   盒的内容区的尺寸—content width和content height —取决于几个因素：生成该盒的元素是否设置了'width'或'height'属性，该盒是否包含文本以及其它盒，该盒是不是表格等等。盒的内容，内边距和边框区域的背景样式由生成（该盒的）元素的'background'属性来指定。外边距背景总是透明的。

2. 合并外边距

   CSS中，两个或多个盒（可能但不一定是兄弟）的相邻的margin会被结合成一个margin。外边距按这种方式结合叫做合并（collapse），产生的结合的外边距叫做折叠外边距（collapsed margin 译注：这里译作折叠表示结果，与合并的动作区分开）

• 根元素盒的margin不合并；
• 如果一个带有间隙（clearance 指clear属性导致元素位置移动形成的间隙）的元素的上外边距与下外边距相邻，它的外边距会和紧挨着的兄弟（元素）的相邻外边距合并，但合并后不会再和父级块的下外边距合并；
• 水平margin不会合并；
• 两个margin是相邻的，当且仅当：

1. 都属于流内（in-flow）块级盒，处于同一个块格式化上下文;
2. 没有行框（line box），空隙，内边距和边框把它们隔开;
3. 都属于垂直相邻框边界（vertically-adjacent box edges），即形成下列某一对：
   盒的上边距与其第一个流内（in-flow）孩子的上边距
   盒的下边距与其下一个流内紧挨着的兄弟的上边距
   最后一个流内孩子的下边距与其height计算值为'auto'的父元素的下边距
   盒的上边距和下边距，要求该盒没有建立新的块格式化上下文，并且'min-height'计算值为0，'height'计算值为0或'auto'，还没有流内孩子折叠外边距也能与另一个外边距相邻，只要其外边距的任意一部分与那个外边距相邻就算

合并后的结果：
当两个或者更多的margin合并时，产生的margin宽度为被合并的外边距宽度中的最大值。至于负margin，就从正相邻margin的最大值中减去负相邻margin的绝对值的最大值。如果没有正margin，就用0减去相邻margin的绝对值的最大值。如果该元素的外边距与其父元素的上外边距合并了，盒的上边框边界被定义为与其父元素的相同否则，要么该元素的父元素没参与外边距合并，要么只涉及其父元素的下外边距。该元素上边框边界的位置与元素下边框非0时的位置相同。

1. 内边距padding

   内边距的属性和外边距的属性类似， 有一点不同的是，内边距padding不能为负。

2. 边框border

   这个属性比较简单， 有些样式而已。

二、视觉格式化模型

在视觉格式化模型中，文档树中的每个元素根据其盒模型生成0个或多个盒。这些盒的布局由（以下因素）控制：

* 盒尺寸与类型
* 定位方案（常规流，浮动与绝对定位）
* 文档树中元素间的关系
* 外部信息（例如，视口大小，图片的固有尺寸等等）

1. 包含块

CSS 2.1中，很多盒的位置和大小是根据被称为包含块的矩形框的边界计算的。一般把生成的盒作为后代盒的包含块，我们说一个盒为其后代“建立”了包含块。“一个盒的包含块”表示“盒所在的包含块”，而不是它生成的（包含块）每个盒都根据其包含块确定了一个位置，但它不受该包含块的限制，可能会溢出

1. 块级元素与块盒

2. 行级元素与行内盒

   使用display属性可以定义block、inline-block、inline、list-item、none等样式。以下分别是这几种属性的作用：

   • 该值会让元素生成一个块盒
   • 该值会让元素生成一个行内级块容器（inline-level block container）。一个inline-block的内部会被格式化成一个块盒，而该元素本身会被格式化成一个原子行内级盒
   • 该值会让元素生成一个或多个行内盒
   • 该值会让元素（例如，HTML中的LI）生成一个主块盒（principal block box）和一个标记盒（marker box）。关于列表及列表格式化示例的更多信息请查看列表章节
   • 该值会让元素不在格式化结构（formatting structure）中出现（即在视觉媒体中，元素不会生成盒也不会影响布局）。后代元素也不会生成任何盒，该元素及其内容会从格式化结构中全部移除。这种行为不能通过给后代设置'display'属性来重写

3. 定位方案

   • 常规流 CSS 2.1中，常规流包括块级盒的块格式化（block formatting），
   • 行内级盒的行内格式化和块级与行内级盒的相对定位

浮动 在浮动模型中，盒先根据常规流来放置，然后从常规流中取出来并尽可能远地向左或向右移动。其它内容可能沿着浮动（盒）的一侧排列（Content may flow along the side of a float）

* 绝对定位 在绝对定位模型中，一个盒会从常规流中全部移除（它不会影响后面的兄弟元素）并根据包含块确定位置
* 如果一个元素是浮动的，绝对定位的或者是根元素，它就叫流外（out of flow）（元素）。如果一个元素不是流外的，就叫流内（in-flow）（元素）。

static
盒是个常规盒，根据常规流布局。'top'，'right'，'bottom'和'left'属性失效.
relative
盒的位置是根据常规流计算的（被称为常规流中的位置），然后盒相对于其常规位置偏移。当盒B为相对定位时，后面的盒的位置仍按照B没有偏移量来计算。table-row-group，table-header-group，table-footer-group，table-row，table-column-group，table-column，table-cell和table-caption元素上'position:relative'的效果是未定义的
absolute
盒的位置（及可能的大小）由'top'，'right'，'bottom'和'left'属性指定，这些属性指定了相对于盒的包含块的偏移量。绝对定位的盒脱离了常规流，意味着它们不会影响后面兄弟元素的布局，而且，虽然绝对定位的盒有外边距，但它们不会与任何其它外边距合并
fixed
除了盒相对于某些参照（reference）是固定的（fixed）之外，盒的位置根据'absolute'模型来计算。如同'absolute'模型一样，盒的外边距不会与任何其它外边距合并。

---

三、常规流

常规流中的盒属于一个格式化上下文，可能是块或是行内（格式化上下文），但不能两者都是。块级盒参与块格式化上下文。行内级盒参与行内格式化上下文.

1. 块格式化上下文

   浮动，绝对定位的元素，非块盒的块容器（例如inline-blocks，table-cells和table-captions），以及’overflow’不为’visible’的块盒（当该值已被传播到视口时除外（except when that value has been propagated to the viewport））会为其内容建立新的块格式化上下文.

   在一个块格式化上下文中，盒在垂直方向一个接一个地放置，从包含块的顶部开始。两个兄弟盒之间的垂直距离由'margin'属性决定。同一个块格式化上下文中的相邻块级盒之间的垂直外边距会合并.

   在一个块格式化上下文中，每个盒的左外边界（left outer edge）挨着包含块的左外边界（对于从右向左的格式化，右外边界挨着）。即使存在浮动（尽管一个盒的行框可能会因为浮动而收缩 译注：环绕浮动元素放置的行框比正常的行短一些），这也成立。除非该盒建立了一个新的块格式化上下文（这种情况下，该盒自身可能会因为浮动变窄）

2. 行内格式化上下文

   在行内格式化上下文中，盒是从包含块的顶部开始一个挨一个水平放置的。这些盒之间的水平外边距，边框和内边距都有效。盒可能会以不同的方式垂直对齐：以它们的底部或者顶部对齐，或者以它们里面的文本的基线对齐。包含来自同一行的盒的矩形区域叫做行框

   行框的宽度由包含块和浮动情况决定，行框的高度由行高的计算小节给出的规则决定

   行框总是足够高，能够容纳它包含的所有盒。然而，它可能比它所包含的最高的盒还要高（例如，如果盒是以基线对齐的）。当盒B的高度小于它所在的行框的高度时，行框中B的垂直对齐方式由'vertical-align'属性决定。当几个行内级盒在水平方向上不能共存于一个行框时，它们会被分到两个或多个垂直堆叠的（vertically-stacked） 行框里。因此，段落就是个行框的垂直栈（vertical stack）。行框没有垂直间隔地堆放（除非在其它地方有特别说明）并且它们不会重叠

3. 相对定位

   当一个盒根据常规流或者浮动摆放好后，它可能会相对于该位置移动，称之为相对定位。用这种方式偏移盒(B1)的位置不影响盒(B2)，遵循：给定B2位置时就当B1没有偏移，并且B2在B1应用偏移之后没有重新定位（re-positioned）。这表明相对定位可能会导致盒重叠。然而，如果相对定位导致有'overflow:auto'或'overflow:scroll'的盒溢出了的话，UA必须让用户能够访问这部分内容（在其偏移位置），此时，滚动条的创建可能会影响布局

4. 绝对定位

   绝对定位模型中，盒相对其包含块明确偏移，它会从常规流中全部移除（不会影响后面的兄弟）。绝对定位的盒会为常规流中的子级和绝对（不包括fixed）定位的后代建立一个新的包含块。然而绝对定位的元素的内容不会沿着任何其它盒排列。它们可能会遮住其它盒的内容（或者它们自身被遮住），取决于重叠盒的堆叠层级（stack levels）

   fixed定位是绝对定位的子类（subcategory）。fixed定位的盒唯一的区别是，包含块由视口建立。对于连续媒体，当文档滚动时，fixed盒不会移动。在这一点上，它们和fixed背景图像类似。对于分页媒体，fixed定位的盒会在每一页上重复（出现）。这在排版（placing）方面很有用，例如，每一页的底部都有一个签名。fixed定位的盒比页区（page area）大的部分会被裁剪。fixed定位盒在初始包含块中不可见的部分将不会被打印