html画页面几个技巧display: inline-block 存在默认默认间距，就算是使用 padding: 0;

最近好长时间都在画页面，来总结几个值得分享的内容：

1.inline-block默认间距

display: inline-block 存在默认默认间距，就算是使用 padding: 0; margin: 0; 也是清除不了，所以经常当你算好了元素的宽度但是还是会出现有元素被挤下去。

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .list {
      width: 100%;
    }
    .list .item {
      height: 30vh;
      width: calc(50% - 10px); /* 减掉边框 */
      display: inline-block;
      border: 5px blue solid;
    }
  </style>
</head>
<body>
  <div class="list">
    <div class="item"></div>
    <div class="item"></div>
  </div>
</body>
</html>

解决方法：

1.设置父元素font-size：0；

<style>
    * {
      margin: 0;
      padding: 0;
    }
    .list {
      font-size: 0; // 这里
      width: 100%;
    }
    .list .item {
      height: 30vh;
      width: calc(50% - 10px); /* 减掉边框 */
      display: inline-block;
      border: 5px blue solid;
    }
  </style>

2.设置父元素letter-spacing: -0.5em;（不推荐，会导致内容超出边框）

<style>
    * {
      margin: 0;
      padding: 0;
    }
    .list {
      letter-spacing: -0.5em; // 这里
      width: 100%;
    }
    .list .item {
      height: 30vh;
      width: calc(50% - 10px); /* 减掉边框 */
      display: inline-block;
      border: 5px blue solid;
    }
  </style>

2.瀑布流排版 column-count

经常有这种瀑布流排版，而且不确定图片的宽高，实际不需要去计算图片宽高，实现就一句:

column-count: n;

n: 需要排多少列就设置多少,上图为 column-count: 6;

3.背景图 cover

当不知道图片的宽高，需要填充一个元素又不导致图片变形

background-size: cover;

4.画页面的开局概念

最近有个刚学前端的小朋友问了几个画页面的问题，我觉得新手和我们的差距就是没有一个开场概念。

当拿到一张UI设计图的时候，做的第一件事应该双手离开键盘，观察设计的布局，一个html的元素结构在脑里印出来，把元素的选择器命名大概列一下，DOM结构构思完成，一口气把元素写完成，再去写css内容。

这一点做好了，对你画页面的时候会很节省时间，不需要在html和css之间来回切换。