我在做 CSS 设计时一直想知道这个问题。
CSS 宽度中的小数位是否受到尊重?或者它们是圆形的?
.percentage {
width: 49.5%;
}
or
.pixel {
width: 122.5px;
}
如果它是百分比宽度,那么是的,它受到尊重:
#outer {
width: 200px;
}
#first {
width: 50%;
height: 20px;
background-color: red;
}
#second {
width: 50.5%;
height: 20px;
background-color:green;
}
#third {
width: 51%;
height: 20px;
background-color:blue;
}
<div id="outer">
<div id="first"> </div>
<div id="second"> </div>
<div id="third"> </div>
</div>
正如 Martin 指出的,当你达到小数像素时,事情就会崩溃,但如果你的百分比值产生整数像素值(例如示例中 200px 的 50.5%),你将得到合理的、预期的行为。
Edit:我更新了示例以展示小数像素会发生什么情况(在 Chrome 中,值被截断,因此 50、50.5 和 50.6 都显示相同的宽度。)
#percentage {
width: 200px;
color: white;
}
#percentage .first {
width: 50%;
height: 20px;
background-color: red;
}
#percentage .second {
width: 50.5%;
height: 20px;
background-color:green;
}
#percentage .third {
width: 51%;
height: 20px;
background-color:blue;
}
#pixels {
color: white;
}
#pixels .first {
width: 50px;
height: 20px;
background-color: red;
}
#pixels .second {
width: 50.5px;
height: 20px;
background-color:green;
}
#pixels .third {
width: 50.6px;
height: 20px;
background-color:blue;
}
#pixels .fourth {
width: 51px;
height: 20px;
background-color:red;
}
<div id="percentage">
<div class="first">50%=100px</div>
<div class="second">50.5%=101px</div>
<div class="third">51%=102px</div>
</div>
<br />
<div id="pixels">
<div class="first">50px</div>
<div class="second">50.5px</div>
<div class="third">50.6px</div>
<div class="fourth">51px</div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)