一、当父元素height:3.2rem,子元素height:100%

[CSS]height:100%和rem存在的误差
可以很明显的看到图片(子元素)下面有黄边(设置的父元素的背景颜色)
[CSS]height:100%和rem存在的误差

父元素实际height:
[CSS]height:100%和rem存在的误差
子元素实际height:
[CSS]height:100%和rem存在的误差

二、当父元素height:3.2rem,子元素height:3.2rem

[CSS]height:100%和rem存在的误差

可以看到子元素已经完全覆盖父元素背景颜色部分(下方没有黄边溢出),但是下面依然留有白边(实际上父元素还是更大,也就是包括下面白色的部分)

父元素实际height:
[CSS]height:100%和rem存在的误差

子元素实际height:
[CSS]height:100%和rem存在的误差
第一次父元素超过子元素3.2px
第二次父元素超过子元素3.201px
我也不知道为什么换成两个rem写法后父元素的背景就不会溢出了。。

三、当父元素height:3.22222222rem,子元素height:3.22222222rem

[CSS]height:100%和rem存在的误差

可以看到此时完全没有白边
父元素实际height:
[CSS]height:100%和rem存在的误差
子元素实际height:
[CSS]height:100%和rem存在的误差
此时无白边且差值最小

四、结论:

在子元素和父元素的height上,用两个精度高(精确到小数点后多几位)的rem值来表示会使得父子元素的实际height差距小,且视觉效果上父元素不会多出子元素一截白边
[CSS]height:100%和rem存在的误差

相关文章:

  • 2021-05-24
  • 2021-11-24
  • 2021-08-10
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2021-06-15
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-07-19
相关资源
相似解决方案