为什么两个矩形的宽度不同?
第一个是:
第二个是:
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>
答案 0 :(得分:2)
至少在Chrome中,这种行为似乎是因为如何计算百分比值的像素值。
#example1
的大小是437px + 的1%,正好是4.37px,但似乎Chrome(可能还有其他浏览器)将此值四舍五入到最接近的整数。由于这种四舍五入,当你将其缩放50倍时,宽度变为仅200px。 #example1
行变为250px宽,因为4.57会向上舍入为5px。#example2
的大小为437px(100%),当缩小为0.5时,宽度变为218.5px。任何小于0.5的值似乎都会向下舍入,而任何等于或大于0.5的值都会向上舍入,因此宽度变为219px。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;
}
&#13;
<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>
&#13;
与我前面提到的(在评论和回答中)相反,缩小行末尾的模糊可能不是因为图层差异,因为在这两种情况下,线条只会获得渲染层而没有图形层。这种模糊是我现在无法解释的。
您可以在下面的文章中阅读有关图层创建,合成和渲染的更多信息: