好程序员web前端分享CSS不同元素margin的计算

好程序员 web 前端分享 CSS 不同元素 margin 的计算 ： 行内级元素

 

　　Inline ，非置换元素 : 如果 margin 值为 auto ，则 margin-left 和 margin-right 的计算值也就为

 

　　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 的值就为

 

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

 

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

 

　　同块级非置换元素一样。

 

　　总结

 

　　行内级置换元素和非置换元素，在 margin 值为 auto 时， margin-left 和 margin-auto 的计算值都为 。

 

 

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

 

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

 

　　如果 width 是 auto 值，那么其他值是 auto 的值就为

 

 

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

 

The percentage is calculated with respect to the width of the generated box ’ s containing block. Note that this is true for margin-top and margin-bottom as well.

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/69913892/viewspace-2641443/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/69913892/viewspace-2641443/