美文网首页CSS
[CSS] 为什么margin:0 auto;可以让块级元素水平

[CSS] 为什么margin:0 auto;可以让块级元素水平

作者: 何幻 | 来源:发表于2016-03-07 07:20 被阅读63次

    https://www.w3.org/TR/CSS2/visudet.html#blockwidth

    10.3.3 Block-level, non-replaced elements in normal flow

    The following constraints must hold among the used values of the other properties:

    'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

    If 'width' is not 'auto' and 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' (plus any of 'margin-left' or 'margin-right' that are not 'auto') is larger than the width of the containing block, then any 'auto' values for 'margin-left' or 'margin-right' are, for the following rules, treated as zero.

    If all of the above have a computed value other than 'auto', the values are said to be "over-constrained" and one of the used values will have to be different from its computed value. If the 'direction' property of the containing block has the value 'ltr', the specified value of 'margin-right' is ignored and the value is calculated so as to make the equality true. If the value of 'direction' is 'rtl', this happens to 'margin-left' instead.

    If there is exactly one value specified as 'auto', its used value follows from the equality.

    If 'width' is set to 'auto', any other 'auto' values become '0' and 'width' follows from the resulting equality.

    If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block.

    相关文章

      网友评论

        本文标题:[CSS] 为什么margin:0 auto;可以让块级元素水平

        本文链接:https://www.haomeiwen.com/subject/yhrnkttx.html