css nth-child() 实现多列布局

以前用惯了flex布局，就忘记了css自带的样式选择器,有时候flex布局也不好使
注意
nth-child(an+b) 可以任意选择某一项，也可以选择某个数的倍数项，但这里有一个面试官喜欢问的点，那就是
他的第一项的index是一，而jquery的eq选择器第一项的index是0
例如 nth-child(1) 表示选择的是第一项（不是第二项）

实现多列布局

要求：现有n个盒子，盒子之间的margin是一样的，分四列排布，最左边的盒子和最右边的盒子要贴着放这些盒子的div边框

HTML

<div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    ...
</div>

CSS

  .box{
      margin-right:20px;
      display:inline-block;
  }
  .box:nth-child(4n){
    margin-right:0px;                                     //第四列不给右边距
  }

补充
选择基数项
nth-child(odd)
选择偶数项
nth-child(even)
选择属于其父元素的首个子元素
first-child
选择元素的首字母
first-letter
选择元素的首行
first-line
指定属于其父元素的最后一个子元素
last-child
从后向前选择
nth-last-child(n)