Question

为什么，＆＃34; box-sizing：border-box;＆＃34;只有当它被使用，并成为一个点？

请告诉我是否遵循什么公式？

Chrome版

44.0.2403.157 m

请勿使用大小调整

<style>
svg {
  border: 1px solid #ddd;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<svg preserveAspectRatio="none" viewBox="0 0 2000 400" width="500" height="400">
  <rect id="hoge" x="50" y="50" width="50" height="50"/>
</svg>
<script>
  console.log($("#hoge").offset()); //Object {top: 59, left: 21.5}
</script>

使用大小调整

<style>
svg {
  border: 1px solid #ddd;
}
* {
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<svg preserveAspectRatio="none" viewBox="0 0 2000 400" width="500" height="400">
  <rect id="hoge" x="50" y="50" width="50" height="50"/>
</svg>
<script>
  console.log($("#hoge").offset()); //Object {top: 58.75, left: 21.450000762939453}
</script>

Answer 1

当你使用border-box时，内容的宽度会改变，而不是使用400px的高度，它现在只能使用（400px - 2px）398px。因此，svg本身必须显示较小。

您的示例的底层计算如下所示： offset.top = margin of body + border + (svg content height / viewBox height * rect y)

在你的第一个例子中，这意味着：8px (default value) + 1px + (400px / 2000 * 50) = 59

你的第二个例子： 8px (default value) + 1px + (398px / 400 * 50) = 58.75

阅读this css-tricks article以获取有关盒子模型的进一步说明。

视频框中的SVG，＆＃34;框大小调整中的CSS：边框框;＆＃34;当组合使用时，位置变为点

1 个答案: