1. 使用inline-block什么时候会显示间隔？有多少种方式可以解决?

存在空格符、换行符、制表符的时候，浏览器会将这些合并为空白符。
有6、7种方法，具体参考去除inline-block间距

父元素设置font-size：0
手动删除上述符号
设置margin值为负
设置letter-spacing值为负
设置word-spacing值为负
让闭合标签吃胶囊
…

2. 如何使用float画出如下的九宫格?

image.png

HTML：

<div class="wrapper">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
</div>

CSS：

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid rgb(69, 146, 182);
    box-sizing: border-box;
}
.item {
    width: 33.3%;
    height: 33.3%;
    box-sizing: border-box;
    float: left;
    border: 1px solid rgb(69, 146, 182);
}

效果如下：

image.png

3. 如何让chrome支持展示小于12px的文字?

HTML：

<p class="px-14">I'm 14 px</p>
<p class="px-12">I'm 12 px</p>
<p class="px-10">I'm 10 px</p>
<p class="px-8">I'm 8 px</p>

方法1：使用css3缩放属性（transform: scale不支持行内元素，注意设置display为block/inline-block）

.px-14 {
    font-size: 14px;
}
.px-12 {
    font-size: 12px;
}
.px-10 {
   font-size: 10px;
   -webkit-transform: scale(0.83);
}
.px-8 {
   font-size: 8px;
   -webkit-transform: scale(0.75);
}

效果图：