关于什么元素的分类可以看我这篇文章CSS:关于元素高度与宽度的讨论 系列文章(二)
行内级元素
Inline,非置换元素:如果margin值为auto,则
margin-left
和margin-right
的计算值也就为0Inline,置换元素:同上
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-left
和margin-right
的值为auto,width的值不为auto,那么就相对于包含块水平居中。
块级置换元素,在文档流中
同块级非置换元素一样。
块级非置换元素,不在文档流中(Absolutely positioned, non-replaced elements)
// 当top/height/bottom 这3个值不是auto,而 margin:auto ,则:
margin-top=margin-bottom=(包含块的高度 – 定位元素高度)/2
'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
<style>
#parent {
background: #999;
height: 300px;
position: relative;
width: 300px;
}
#child {
background: #333;
height: 50px;
bottom: 0;
top: 0;
left: 0;
right: 0;
margin: auto;
position: absolute;
width: 50px;
}
</style>
<div>
<div id="parent">
<div id="child"></div>
</div>
块级置换元素,不在文档流中
同上
总结
行内级元素
行内级置换元素和非置换元素,在margin值为auto
时,margin-left
和margin-auto
的计算值都为0。
块级元素
-
块级置换元素和非置换元素在文档流中:
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
如果width是auto值,那么其他值是auto的值就为0
如果
margin-left
和margin-right
的值为auto,width的值不为auto,那么就相对于包含块水平居中。
2.块级置换元素和非置换元素不在文档流中。
见上文。
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.
abs-non-replaced-height
Why does “position: absolute; left: 0; right: 0; width: XYpx; margin: 0 auto” actually center?
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。