前端页面遇到的坑

（1）子div属性display: inline-block，排列为一行后中间有间隙。

原因：这个间隙是inline-block产生的一个空格，这个间隙的大小取决于父div的字体大小。为了消除这个间隙可以将父div的字体大小设置为0，然后在子div中设置字体大小。

（2）div不显示内容

原因：同上，显示不出来很有可能是为了消除inline-block的间隙，设置了字体为0，这样内部元素的大小字体就会发生变化。所以当设置了字体0时。一定不要忘记设置子div的字体大小。

（3）给div设置了z-index样式，但是这个div依然不是最上层。

原因：z-index要在position：relative才会生效。所以设置z-index的同时要注意position的值。

（4）改变图片颜色

使用filter属性，类似添加了一层滤镜，我这里给一个改变为白色的例子，通过设置filter中的方法参数来处理图片。

filter: brightness(100);

（5）为了让页面在不同分辨率下都适应，将页面布局的大小都改为%。但是border-radius和字体这种方法没有用。

问题解决：将字体和圆角的单位改为vw，px换算vw这两个样式还不太一样，反正我在改的时候算不到一块，希望有一天能明白这个换算关系。