We stand alone,
TOGETHER.

## block-level elements的宽度计算

Posted by zeal on 2006-12-27 00:00 , 2648 characters , Via |  + 0 - 0   English

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:

1. None of width, margin-left and margin-right are specified as 'auto' and the values satisfy the constraint.
2. 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.
3. If exactly one of width, margin-left or margin-right is 'auto', its value is computed from the equation.
4. 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.
5. 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

2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年 Creative Commons
(创作共用) CC

-相同方式分享
Launched @
2005-04-27
 Since 2005.04.27 梦想 就像鸡蛋　要么孵化 要么臭掉 RSS Feed (Entries) | Back To Home | @ZEAL | 沪ICP备05024379号