实验一:宽度为 1/7 ,第 7 项在 Edge 下会换行

1
2
3
4
5
6
7
8
9

实验二:测试两个宽度大于 50% 的能容纳在 100% 内

width: 50.0001%;
width: 50.0011%;

实验三:测试 width 取值精度

width: 14.285714285714286%
width: 110.123456789123456789px
width: calc(14.2857%)
width: calc(100% / 7)
width: calc(100% / 7 - 10px)
width: calc(100% / 7 - 0px)
width: calc(14.2857% - 0px);

实验四:offsetWidth 变化

1
2
3
4
5
6
7
8

实验5:带间距 12 px

1
2
3
4
5
6
7
8

实验6:calc 计算顺序不同

(验证直接设值时的舍入规则)1228*0.1429-10.28 = 165.2
(正常操作)1228*0.142857-10.28 =165.15(舍入)
(验证结合律是否影响)1228*0.142857-10.28 =165.15(舍入)
(验证数字舍入规则)1228*0.166667-6.66 =198.01(舍入)
(验证百分比的舍入规则)1228*0.166667-6.66 =198.01(舍入)
(扣除双数值项的影响)1228*0.1429 - 10.28 -0.01=165.19
(扣除双数值项的影响)1228*0.1429 - 10.28 -0=165.2
(扣除单数值项的影响)1228*0.142857 - 0= 175.43
(扣除双数值项的影响)1228*0.1429 - 0.02= 175.46
(扣除多数值项的影响)1228*0.1429 - 0.01= 175.47

实验7:测试 Edge 真实值是否能被容纳下

可以容下,计算值正好的话,实际值会不断调整6位小数直至可以容下

实际值 165.16000366210937px
实际值 166.16000366210937px