绝对定位元素宽高分析

GD Star Rating
loading...

update[2015-02-02]: 在理解了containing block这个概念之后,发现这篇文章好水,但是人都是慢慢进步的嘛,所以还是留着好了~


一直以来对绝对定位元素没有太多了解,上周五下午测试的时候发现绝对定位元素在使用100%宽高的时候占据的不仅仅是父元素的宽高,还包括父元素的padding,这么说比较抽象,咱直接上demo吧。

See the Pen dimension of absolute positioned element by Bane Lee (@zenoven) on CodePen.

说明:

  1. .sub为绝对定位,多数.wrap为相对定位;
  2. .sub2有边框,.sub3有padding,.sub4有边框也有padding;
  3. .block1 中的.sub没有设置宽高;
  4. .block2/3中的.sub用百分比设置宽高;
  5. .block4/5中的.sub用left/right/top/bottom来设置宽高;
  6. .block6/7中的.sub用固定px值设置宽高;
  7. .block2和.block3对比,区别在于.block3的定位及.block3 .wrap的定位;
  8. .block4和.block5对比,区别在于.block5的定位及.block5 .wrap的定位;
  9. .block6和.block7对比,区别在于.block7中.sub设置overflow visible;
  10. 测试环境为Mac OS X 10.9.5,Chrome 38.0.2125.101 / Firefox 32.0.3,WIN8虚拟机下测试了IE8-11。

通过对比以上的输出,对绝对定位元素可以得出如下结论:

  1. 宽高计算参考对象是其最近的设置为relative的父元素为参考对象,如.block2和.block3的对比;
  2. 在没有设置宽高时根据其内容自适应,如.block1;
  3. 在用百分比计算宽高时,要加上参考对象的padding,.sub 宽/高 = (参考对象宽/高 + padding-left + padding-right) * 百分比,如.block2;
  4. 在用left/right/top/bottom设置宽高时,.sub 宽/高 需要减去.sub的border和padding,如.block4;
  5. 在用固定的px值设置宽高后,border、padding无影响,即.sub宽/高 = 设置的宽/高,如.block6;
  6. 在用固定的px值设置宽高后,即使设置overflow: visible 也无效,如.block6和.block7对比。

啰嗦的挺多,其实也蛮简单的就1和3这两条,以closest relative的对象作参考,百分比算宽高时参考对象的padding要计算在内,其他的几条都是细节性的东西仔细想下就明白了。

如有纰漏,欢迎指正~

绝对定位元素宽高分析, 4.3 out of 5 based on 3 ratings

已有2条评论 发表评论

  1. 微知 /

    微知博客域名在godaddy账号加域名一起被盗[大哭] 保护好自己域名唉

    GD Star Rating
    loading...
    1. zenoven / 本文作者

      啊?为什么会被盗啊?

      GD Star Rating
      loading...

发表评论

This site uses Akismet to reduce spam. Learn how your comment data is processed.