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

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

在这里插入图片描述
可以很明显的看到图片(子元素)下面有黄边(设置的父元素的背景颜色)
在这里插入图片描述

父元素实际height:
在这里插入图片描述
子元素实际height:
在这里插入图片描述

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

在这里插入图片描述

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

父元素实际height:
在这里插入图片描述

子元素实际height:
在这里插入图片描述
第一次父元素超过子元素3.2px
第二次父元素超过子元素3.201px
我也不知道为什么换成两个rem写法后父元素的背景就不会溢出了。。

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

在这里插入图片描述

可以看到此时完全没有白边
父元素实际height:
在这里插入图片描述
子元素实际height:
在这里插入图片描述
此时无白边且差值最小

四、结论:

在子元素和父元素的height上,用两个精度高(精确到小数点后多几位)的rem值来表示会使得父子元素的实际height差距小,且视觉效果上父元素不会多出子元素一截白边
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_43540219/article/details/107625742