【CSS】解决ul下的li边框变粗问题

应用场景

淘宝首页的分类栏就用到了ul+li的布局

遇到的问题

li使用box-sizing: border-box;
给每个li标签加上1px的border会出现相邻li的border挨在一起，但不重合，如下图所示：

解决方法

每一个li都加上margin-left: -1px; 和 margin-top: -1px;
为什么要加margin-left和margin-top？
原因是li是块级元素且添加了浮动，第一个li加了外边距向左上移动1px之后，旁边有了1px的间隔，后面的li会向左自动贴上去，但此时后面的li的margin也会起作用，所以这个时候的li边框其实是相邻两个边框重合了（重合的线是不会变粗的），就变正常了，如下图所示：

这里要注意的点
使用margin解决了问题，但是每个li的宽高因为margin都少了1px，所以windth： '原来的宽' + 1 + 'px' 和 height: '原来的高' + 1 + 'px'

CSS

  <style type="text/css">
  ul {
    margin: 0;
    padding: 0;

  }
    .table {
      width: 300px;
      margin: 200px auto;
    }
    li {
      float: left;
      width: 100px;
      height: 100px;
      border: 1px solid #000;
      box-sizing: border-box;
      list-style: none;
      background: aqua;
      margin-left: -1px;
      margin-top: -1px;
    }
    .clearfix::after {
      content: "";
      display: block;
      clear: both;
    }
  </style>

body

  <ul class="table clearfix">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>