我在做 CSS 设计时一直想知道的事情。
是否尊重 CSS 宽度中的小数位?还是圆 Angular 的?
.percentage {
width: 49.5%;
}
或
.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 指出的那样,当您使用小数像素时,事情就会崩溃,但如果您的百分比值产生整数像素值(例如,示例中 200 像素的 50.5%),您将获得合理的预期行为。
编辑:我更新了示例以显示小数像素会发生什么(在 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>
关于html - 是否尊重 CSS 宽度中的小数位?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4308989/