为何inline-block元素内两个input的总宽度是单个input的两倍？

• 核心是inline-block元素宽度计算和百分比宽度的循环依赖处理机制：
  1. inline-block元素未显式设置宽度时，默认遵循收缩包裹规则，宽度刚好适配内部所有内容的总宽度，不会自动撑满父容器。
  2. 你给子元素input设置了width: 100%，这个百分比宽度的参考基准是父元素（也就是inline-block的div）的可用宽度，此时就形成了循环依赖：父div的宽度要由子元素宽度决定，子元素的宽度又要参考父div的宽度。
  3. 浏览器针对这类循环依赖有固定的处理逻辑：
     • 第一步：先忽略子元素的百分比宽度设置，计算子元素在默认自动宽度下的总宽度，将这个值作为父inline-block div的临时宽度
     • 第二步：再用这个临时宽度作为基准，计算子元素的100%宽度，完成最终渲染
• 对应到你的示例：input是浏览器原生控件，有默认的固定预设宽度（不同浏览器默认值大多在150~200px区间），第一个section内的div包含2个input，第一步计算出来的临时宽度就是2个input默认宽度之和，第二个section内的div只有1个input，临时宽度就是单个input的默认宽度，所以最终第一个section的宽度约为第二个的两倍。
• 就算把input替换为inline-block类型的div也会出现同样情况：只要子div同样设置了width:100%，上述计算规则完全适用。如果子div没有显式设置固定宽度，第一步计算自动宽度时会取其内容/默认最小宽度的总大小，2个子元素的总宽度就是单个的2倍，最终父元素宽度也会呈现两倍关系。

内容的提问来源于stack exchange，提问作者itsnotme