提问: 子容器为什么无法通过百分比计算div父容器由另外一个子元素撑开的高度

首先,记录一下我看到这个问题的出处:https://blog.csdn.net/m0_38005587/article/details/81292339

好了,问题开始: 父容器未设置高度,反而由一子容器高度撑开,为什么其他子容器就是计算不了?

结构不复杂,1层div,里面包上1个span,1个div:

效果的话可以自己写写看看效果,总而言之,.cover元素不具备高度!

查看父容器高度设置:咦,灰色?注意哦!如果设置在父级上,显示的是明亮的颜色,而不是这种暗淡的,原因何在?

推测:由于默认的父级div高度是auto,也只有这种情况下,auto * 100%才无法计算

虽然这儿父级height被子元素给修改了,但是另外一个子元素继承的却是这个auto值,估计得看下dom tree是如何构造的了。。。

 

-----------------------补充于2019年1月9日 10:13:18--------------------------

这个原则并不会受到子元素排列顺序的影响,测试的时候你会发现,只要子元素中有一个撑开了父容器高度,那么其他子元素所继承的高度根本就不会是撑开的高度,而永远都是父元素默认的auto。

-----------------------补充于2019年3月15日17:02:49--------------------------

因为按照规范,如果该元素的高度未显式指定,同时又非定位元素,那么该元素的高度的计算值就始终为auto,或许表现值就等于子元素撑开的高度吧,这种类型行为还有很多,就不一一列举了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值