好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

深入理解CSS定位中的偏移_html/css_WEB-ITnose

× 目录 [1]定位 [2]包含块 [3]偏移属性 [4]绝对定位 [5]格式化 [6]auto

前面的话

【4个auto】

  当width不为auto时,margin-left和margin-right被置为0,left被置为0,right为计算值

  当left不为auto时,margin-left和margin-right被置为0,width被置为宽度最小值(内容宽度),right为计算值

  当right不为auto时,margin-left和margin-right被置为0,width被置为宽度最小值(内容宽度),left为计算值

  当margin-left不为auto时,left和margin-right被置为0,width被置为宽度最小值(内容宽度),right为计算值

  当margin-right不为auto时,left和margin-left被置为0,width被置为宽度最小值(内容宽度),right为计算值

  类似地,

  当height不为auto时,margin-top和margin-bottom被置为0,top被置为0,bottom为计算值

  当top不为auto时,margin-top和margin-bottom被置为0,height被置为高度最小值(行高),bottom为计算值

  当bottom不为auto时,margin-top和margin-bottom被置为0,height被置为高度最小值(行高),top为计算值

  当margin-top不为auto时,top和margin-bottom被置为0,height被置为高度最小值(行高),bottom为计算值

  当margin-bottom不为auto时,top和margin-top被置为0,height被置为高度最小值(行高),bottom为计算值

【5个auto】

  left、margin-left和margin-right被置为0,width被置为宽度最小值(内容宽度),right为计算值

  类似地,top、margin-top和margin-bottom被置为0,height被置为高度最小值(行高),bottom为计算值

总结

  auto值的赋值顺序为:margin先置0或其他值,然后宽高置为最小值,然后left/top置为0,最后right/bottom为等式计算值

  [注意1]IE7-浏览器不支持绝对定位元素通过将上下外边距设置为auto来实现垂直居中的行为

  [注意2]IE6-浏览器不支持绝对定位元素不设置宽度,而通过设置top/left/right/bottom来撑开宽高的行为

//DEMO中,定位元素的padding、border都为0。而父级元素也就是包含块的width和height都设为200px,边框为2px 

查看更多关于深入理解CSS定位中的偏移_html/css_WEB-ITnose的详细内容...

  阅读:40次