【子绝父相为什么子元素会占满父元素 _定宽 _定位 】 | IT修真院·坑乎
问题已收录 子绝父相为什么子元素会占满父元素
我也踩过这个坑( 1 )
已统计您的踩坑,无需重复点击
回答(4)
定宽 定位
详细描述
截图
代码
编辑于2024-04-20
  • [上海|荣耀师兄]JS-杨亚洲
    3

    其实这很好理解。

    当一个父级设置了position:relative;相对定位。

    而子级设置position:absolute;绝对定位。此时设置了

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    你思考一下,在水平方向上,一个没有设置的宽度的盒子,它要距离父级容器的左边距为0 ,也要距离父级容器的右边距为0,那么他要如何保证自己能做到这两点呢?只能拉伸自己,达到父级容器的要求。所以此时子级的宽度,与父级相同,垂直方向亦是如此。子级的height与父级的height相同。

    这是绝对定位的拉伸性,是一种特性。

    补充两点:

    1、当子级设置了width和height后。也同时设置四个方向都为0 ,此时的表现如何?

    此时的表现子级贴在容器的左上角。相当于:left:0;top:0;即

          如果top和bottom都被指定(技术上,而不是auto),top 胜出。

          如果指定了left 和right两侧,则在direction为ltr(英语,水平日语等)时left赢,

          并且在direction为rtl时right赢(阿拉伯文,希伯来文等)。

    2、当子级设置了width和height后。也同时设置四个方向都为0 ,再给子级设置margin:auto;此时作何表现?

         子级水平垂直居中了。

     成果展示:    https://god-y.github.io/test/position/abso.html

    代码地址:   https://github.com/God-Y/test/blob/master/position/abso.html

    编辑于2019-09-06
  • [真传弟子]JS-关楠
    0

    因为被拉长了啊,同时保证四个方向都是0,只能是这样,这个方法是个脏办法,有时候有奇效

    编辑于2018-03-27
  • [深圳|结业弟子]JS-林健凡
    0

    阿 我找资料都是说的什么会覆盖父元素之类的 ‘同时保证四个方向都是0’这句话就搞懂了这个问题 确切的描述应该是‘要同时保证子元素距离父元素的四个方向的距离都是0’这样更清除一点了 多谢师兄

    编辑于2018-03-27
  • [无名弟子]粟帅斌
    0

    学到了


    编辑于2019-09-06