@ZEAL Blog·厉
WWW Zeal Blog
We stand alone,
TOGETHER.

block-level elements的宽度计算

Posted by zeal on 2006-12-27 00:00 , 2648 characters , Via |  + 0 - 0   English
转载请保留本行原始出处声明信息 : http://www.zeali.net/entry/472 MaDe1nZEAL
标签 ( WebDev ):

对于 block-level 的页面元素(比如 DIV )来说,要让他相对于父级元素居中显示的话,标准的做法是为该元素定义的样式中包含 margin: auto; 属性。虽然在 IE 下我们使用 text-align: center; 就可得到居中的效果,但如果要考虑到不同浏览器之间的兼容,还是使用标准的方式比较好( text-align 理论上应该只是用来指定 block-level 元素里面所包含的每一行 inline-level 元素 -- 比如 SPAN -- 的对齐方式)。

来自 CSS3 的相关定义

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

Last Modified on 2007-05-28 14:58
没有评论.
日志存档
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
本 Blog 原创内容
遵循以下授权:

Creative Commons
(创作共用) CC

署名-非商业性
-相同方式分享
ZEAL Blog 基于
Powered byPivot - 1.24.1: 'Arcee'
Pivot1.24.1
开发
系统部署于
Linode.com
Launched @
2005-04-27
Since 2005.04.27  梦想 就像鸡蛋 要么孵化 要么臭掉RSS Feed (Entries) | About me | Back To Home | @ZEAL | zbird.com | 沪ICP备05024379号