margin,外边距,用于处理元素间的边距。
绝对定位下,元素脱离文档流,同辈子元素间margin不再起限制位置的作用。
同时,起效果的margin值与定位方向有关。
#test1{
position: absolute;
background-color: red;
height: 10px;
width: 10px;
top: 10px;
left: 0;
margin-top: 10px;
margin-right: 10px;
/*margin-bottom: -5px;
margin-right:-5px;*/
}
使用top、left定位,则margin-top、margin-left产生同方向相加的位移效果,margin-bottom、margin-righ产生无任何效果的margin空间。
使用bottom、right定位,则相反margin-bottom、margin-right产生位移,margin-top、margin-left产生无任何效果的margin空间,即使margin为负值,同样适用,由此有了50%定位加负值margin的居中方式。
在多个定位方向同时存在的情况下,对位移效果而言,margin的top/left有效果,bottom/right无位移效果。top、bottom定位均不存在,默认“top:0”,水平方向上则是“left=0”。
#test{
position: absolute;
background-color: red;
height: 10px;
width: 10px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
关于这种情况为什么居中,不是很懂。通过firefox的计算发现,left和right值都变成了45px,margin全部为0(父元素width为100px)。left和rigt只要保持相等的值,就一直居中,直到两者的值大于45px,在把两者都设置为46px后,优先级高left保持了46px的值,而right变成了44px,不再居中。
考虑到是负的margin值影响,测试了火狐的计算,负的margin值会直接显示margin的,不会记入left这些定位属性内。(经验证,chtome会显示为margin,firefox确实将margin的auto值算入了定位中)
原理应该类似于boarder-boxing模式下,上下padding之和超出heght时,会自动增加盒子的height,左右一样的(这里有个其他情况,仅仅单个padding超出height,height并不会增加,content显示在box外面。
-————————————————————————————————————————————————————————————————————————————
在绝对定位下,更像是先定位了一个替代元素,然后相对于这个替代元素,产生适合margin值的子元素位置来放置子元素,即最终的元素。
left:0,定位了一个元素,right:0又定位了一次,但被忽略。但却产生了两个替代元素,组成一个大的替代元素,之后,margin开始起效果。由于top、left优先级高,设置具体值的margin值仍然相对于left、top定位,与一个替代元素还是一个大的替代元素并没有变化。而“margin:0,auto”利用左右margin相等实现居中效果,必须兼顾左右。
如果left:0;right:-100%;margin:auto能实现被右边线对半切,应该这么想就是对的。
经过验证,确实如此。
—————————————————————————————————————————————————————————————————————————————
在left/right设置为45px以上时失效(父元素width100px),按照此说法应该居中,实际仅left有效。
‘top’ + ‘margin-top’ + ‘border-top-width’ + ‘padding-top’ + ‘height’ + ‘padding-bottom’ + ‘border-bottom-width’ + ‘margin-bottom’ + ‘bottom’ = height of containing block
,按照这个垂直方向的公式换算,计算出margin为负值,依然居中,除非margin-auto值不能为负。