要么孵化 要么臭掉
block-level elements的宽度计算
对于 block-level 的页面元素（比如 DIV ）来说，要让他相对于父级元素居中显示的话，标准的做法是为该元素定义的样式中包含 margin: auto; 属性。虽然在 IE 下我们使用 text-align: center; 就可得到居中的效果，但如果要考虑到不同浏览器之间的兼容，还是使用标准的方式比较好（ text-align 理论上应该只是用来指定 block-level 元素里面所包含的每一行 inline-level 元素 -- 比如 SPAN -- 的对齐方式）。
For block-level elements with horizontal flow in a containing block also with horizontal flow, the computed values of the 'width' and margins must satisfy this constraint:
(width of containing block) =
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
The following cases can occur:
- None of width, margin-left and margin-right are specified as 'auto' and the values satisfy the constraint.
- None of width, margin-left or margin-right was specified as 'auto' and the equation is not satisfied. There are two sub-cases: (1) if the 'direction' of the element is 'ltr', the specified value of 'margin-right' is ignored and 'margin-right' is set to the value that makes the equation true; (2) if 'direction' is 'rtl', it is 'margin-left' that is ignored and computed from the equation.
- If exactly one of width, margin-left or margin-right is 'auto', its value is computed from the equation.
- If width and one or both margins are 'auto', the margins that are 'auto' are set to 0 and the equation is solved for width.
- If both margin-left and margin-right are 'auto', the equation is solved under the extra constraint that margin-left = margin-right.
If, after solving the equation, width has a value that is smaller than 'min-width', the computed value of 'width' is set to the computed value of 'min-width' and the constraint is evaluated again as if width had been specified with this value.
If, after solving the equation, width has a value that is larger than both 'max-width' and 'min-width', the computed value of 'width' is set to the larger of 'max-width' and 'min-width' and the constraint is evaluated again as if 'width' had been specified with this value.
Note: case 5 can be used to center block-level elements:
BLOCKQUOTE {
width: 30em;
margin-left: auto;
margin-right: auto }
This is different from 'text-align: center', which centers each line inside the block, but not the block inside its parent.
Block-level elements with a vertical flow inside a containing block with a vertical flow are analogous, but with a constraint on height and margin-top/margin-bottom:
(height of containing block) =
margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom
