关于height: auto值与normal流渲染之间不得不说的一些相关性

2020年5月29日22:01:38

引子：height: auto这个值很少有人直接引用，毕竟作为一个默认值（关键字），大家都是一眼瞥过，今天想来说说这个值得一些不起眼的地方，在我前篇文章中有出现过，子元素撑开父容器高度，而其他子元素的height: 100%不起作用的现象，其根源就来源于height: auto值，当时的解释是auto * 100%是得不出结果的，但是始终无法解释为什么父容器表现了一个高度，得出的却是auto值？

auto: 一个关键字，也是一个具有计算意味的词，很明显，上述父容器的height是得出了值的，至于为什么？个人猜测是由于渲染的时期相差，由于子元素的百分比计算是在父容器的高度得出结果之前出现的，由此造成了auto这个值既是确定的又是不定的，确定在于整个渲染完成，不定则是在未渲染完成之前处于计算（不确定）意味。

那么至于渲染到底是不是符合我的猜测，还需要进一步的深究，总结上一段话的核心：

文档流的渲染是否遵照从先到后的顺序？即使包含了非文档流元素，也会出现这样的顺序，若为真，那么猜测有误，否则为真

猜测来源1：简而言之，即更多/收起动画的本质，在于height: 0 到height: auto之间的变化，但是要注意的是，使用transition: height .25s 是没有动画效果的，这说明了什么？

首先

第一：0 -> auto（计算值）出现了不友好的跳跃式展开，这说明auto计算出了值

第二：transition未触发，这说明在执行动画时，auto不明确，不确定以至于根本不知道height 如何从0到auto进行变化

由此得出了第一步的理论，那就是transition的计算（或者说一些其他需要考虑到height: auto情况的属性）是在auto值计算出来之前，从而导致了transition的无效

猜测来源2：height: auto的奇异导致了要解决问题，只有两步：

1.一个确定的height值，那么子类使用百分比没啥问题

2.使用绝对定位，定位元素可以使用百分比计算出值，即使父类height: auto

那么，为什么定位可以计算出值？（这里的元素均指高宽由内部元素决定）根据规范，当父类默认不设置height时（并且该元素不为绝对定位），其值为计算值auto，也就是说只要是auto，那么百分比必定失效，可是width却不然，规范中定义它为未定义行为，表示让浏览器自个儿想办法去，这是为啥？个人目前也不甚清楚，遗憾。。

那，定位可以计算出值，而普通元素却计算不出？相信大伙应该能够猜出一点端倪，是，我觉得就是文档流和脱离文档流的渲染方式有那么点不同，由此得出上述猜想：

1.普通元素的操作并不能及时得到撑开的父容器高度，因此得到的是auto值

2.绝对定位元素已经脱离了文档流，他在文档流渲染完成之后（此时计算出了auto值）开始渲染，从而得出了auto的准确值，由此百分比生效！！！

书写的比较简陋，测试代码的话以后补齐