神刀安全网

CSS:不同元素margin的计算

关于什么元素的分类可以看我这篇文章 CSS:关于元素高度与宽度的讨论 系列文章(二)

行内级元素

  • Inline,非置换元素:如果margin值为auto,则 margin-leftmargin-right 的计算值也就为0

  • Inline,置换元素:同上

  • Inline-block,置换元素在文档流中:同上

  • Inline-block,非置换元素在文档流中:同上

块级元素

块级非置换元素,在文档流中

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

下面的情况下,如果margin值为auto

  • 如果width是auto值,那么其他值是auto的值就为0

  • 如果 margin-leftmargin-right 的值为auto,使用的值相等,那么就相对于包含块水平居中。

块级置换元素,在文档流中

同块级非置换元素一样。

总结

  1. 行内级置换元素和非置换元素,在margin值为 auto 时, margin-leftmargin-auto 的计算值都为0。

  2. 块级置换元素和非置换元素:

    'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block  
  • 如果width是auto值,那么其他值是auto的值就为0

  • 如果 margin-leftmargin-right 的值为auto,使用的值相等,那么就相对于包含块水平居中。

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » CSS:不同元素margin的计算

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮