前端开发中遇到的一些常见的小问题

一、标签属性设置为inline-block出现隐藏的长度为4px的间隙

首先说下：这不是bug，这是符合规范的应该有的表现，但是有时这种间距对我们布局或处理兼容性产生影响，因此需要去除掉它

出现的原因是标签段之间的空格

处理后：

解决方法：

1. 使用font-size

2. 移除空格  代码可读性低，一般不建议采取此类方法

3.使用word-spacing(单词边距)

4.使用字符间距(letter-spacing)

google chrome浏览器 ul的letter-spacing最大值为-5px，再大就会出现间隙（测试时间18/08/01 ）

ie浏览器 ul的letter-spacing最大值为-4px，再大就会出现间隙（测试时间18/08/01 ）

5.如果正确使用类选择器？（俩个类选择器之间是否有空格的区别）

比如有这样一个场景，框架已有定义好的样式，但不适用于当前页面的UI要求，需要我们重置该UI

<QInput  className="input-zone__mobile"/>页面中有多个这样子的组件，但className不同 对应于原生的

<div class="q-input q-input--default q-list-line">/*className会加到该标签当中*/
   <div class="q-list-line__hd">
     <span class="q-input__label">input标题</span>
   </div>
   <div class="q-list-line__bd">
     <input
       class="q-input__control"
       placeholder="呵呵"
       type="text"
       />
   </div>
 </div>

我们可以通过.input-zone__mobile.q-input-default{***}重置<QInput/>组件样式

总结：俩个类选择器之间是否有空格的区别

有空格：.class1 .class2{}

即后代选择器，选择class1后代的有class2的节点

无空格： .class1.class2{}

即选择同时含有class1和class2的元素节点