css width % 工作不正常；比必要的时间更长
css width % working incorrectly; longer than necessary
我有一组图像，我想将它们一张一张地堆叠起来。我正在使用 bootstrap，并且我在超大屏幕的中心放置了一个父 div。这个 div 包含一个图像，绝对 divs 进一步包含图像。但是，当我将 width:100% 应用于子 divs 时，它们最终变得更长/
这个js-fiddle是代码片段：https://jsfiddle.net/yhL6tndn/
我相信 % 实际上是相对于父容器（示例中的 #major）测量的。所以我的 #semimajor 的宽度和高度应该相等，因为 #major 的宽度和高度相等。
在检查实际尺寸时，我发现
#major 父级的整个宽度用于计算 #semimajor
或
#major 的宽度是用边距计算的。我的 box-sizing 属性设置为 border-box。
应该发生的是 #semimajor 应该测量 150px x 150px。不过我无法发现代码中的错误。
编辑 1：#major 上的 position: relative 删除了问题，但我仍然不明白为什么一定是这样。
当您使用 position: absolute 时，它来自文档的正常流并且相对于 body 定位并且来自 #major.
请注意，当您添加 position: relative 时，它绝对定位到最近的相对定位的父容器，即 #major，因此子 div 不会超过 #major。
我有一组图像，我想将它们一张一张地堆叠起来。我正在使用 bootstrap，并且我在超大屏幕的中心放置了一个父 div。这个 div 包含一个图像，绝对 divs 进一步包含图像。但是，当我将 width:100% 应用于子 divs 时，它们最终变得更长/
这个js-fiddle是代码片段：https://jsfiddle.net/yhL6tndn/
我相信 % 实际上是相对于父容器（示例中的 #major）测量的。所以我的 #semimajor 的宽度和高度应该相等，因为 #major 的宽度和高度相等。
在检查实际尺寸时，我发现
#major父级的整个宽度用于计算#semimajor 的宽度
或
#major的宽度是用边距计算的。我的box-sizing属性设置为border-box。
应该发生的是 #semimajor 应该测量 150px x 150px。不过我无法发现代码中的错误。
编辑 1：#major 上的 position: relative 删除了问题，但我仍然不明白为什么一定是这样。
当您使用 position: absolute 时，它来自文档的正常流并且相对于 body 定位并且来自 #major.
请注意，当您添加 position: relative 时，它绝对定位到最近的相对定位的父容器，即 #major，因此子 div 不会超过 #major。