gpt4 book ai didi

css - 转换比例时宽度不一致

转载 作者:行者123 更新时间:2023-11-28 11:33:21 25 4
gpt4 key购买 nike

为什么下面的两个矩形宽度不同?

第一个是:

  • 1% 宽度
  • 50 倍比例

第二个是:

  • 100% 宽度
  • .5 倍规模

1 * 50 = 50 和 100 * .5 = 50,不是吗?

body {
margin: 10px 30px;
}
#box {
width: 439px;
height: 200px;
border: 1px solid black;
box-sizing: border-box;
}
.line {
height: 10px;
transform-origin: left;
}
#example1 {
width: 1%;
transform: scaleX(50);
background-color: red;
}
#example2 {
width: 100%;
transform: scaleX(.5);
background-color: blue;
}
<div id='box'>
<div id="example1" class="line"></div>
<div id="example2" class="line"></div>
</div>

最佳答案

至少在 Chrome 中,这种行为似乎是因为百分比值的像素等效值是如何计算的。

  • #example1 的大小是 437px+ 的 1%,正好是 4.37px,但 Chrome(可能还有其他浏览器)似乎将这个值四舍五入到最接近的整数。因为这个四舍五入,当你把它放大 50 倍时,宽度变成只有 200px。
  • 当您将父级大小增加到 459 像素时,您可以看到 #example1线条变为 250 像素宽,因为 4.57 被四舍五入为 5 像素。
  • #example2 的大小是 437px (100%),当它缩小到 0.5 时,宽度变成 218.5px。任何小于 0.5 的值似乎都会向下舍入,而任何等于或高于 0.5 的值都会向上舍入,因此这里的宽度变为 219px。
  • 由于上述原因,您可以看到元素宽度之间存在 19 像素的差异。在代码片段中,我添加了其他几行像素值以供引用。绿色的宽度为 218px,黄色为 200px,紫色为 218.4px,巧克力色为 219px,棕色为 218.5px。你可以看到绿色和紫色的宽度是一样的,而巧克力色和棕色的宽度是 1px。
  • 如果您将容器宽度设置为 100 的倍数,那么这个问题就会消失。请参阅代码段中的第二个 block 。请注意,由于 border,它仍然有一个小偏差。设置为 498px 的 1% 是 5px(所以 50 倍是 250px)但是 .5 倍 498px 是 249px。如果删除 border,您可以看到它完全匹配(或 `box-sizing)并使父容器的大小为 100 的倍数。

+ 437px 因为即使我们说 100%,border-width任何一方都被排除在box-sizing: border-box之外.

body {
margin: 10px 30px;
}
#box {
width: 439px;
height: 200px;
border: 1px solid black;
box-sizing: border-box;
}
.line {
height: 10px;
transform-origin: left;
}
#example1 {
width: 1%;
transform: scaleX(50);
background-color: red;
}
#example2 {
width: 100%;
transform: scaleX(.5);
background-color: blue;
}
#example3 {
width: 218px;
background-color: green;
}
#example4 {
width: 200px;
background-color: yellow;
}
#example5 {
width: 218.5px;
background-color: brown;
}
#example6 {
width: 219px;
background-color: chocolate;
}
#example7 {
width: 218.4px;
background-color: purple;
}
#box2{
width: 500px;
height: 200px;
border: 1px solid black;
box-sizing: border-box;
}
<div id='box'>
<div id="example1" class="line"></div>
<div id="example2" class="line"></div>
<div id="example3" class="line"></div>
<div id="example4" class="line"></div>
<div id="example5" class="line"></div>
<div id="example6" class="line"></div>
<div id="example7" class="line"></div>
</div>

<div id='box2'>
<div id="example1" class="line"></div>
<div id="example2" class="line"></div>
</div>


与我之前提到的相反(在评论和回答中),缩小线末端的模糊可能不是因为层差异,因为在这两种情况下,线只会获得渲染层而没有图形层。这种模糊是我现在无法解释的。

您可以在下面的文章中阅读有关图层创建、合成和渲染的更多信息:

关于css - 转换比例时宽度不一致,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31947495/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com