盒子边框细节，点击效果

 ul li{
            position: relative;/*让z-index命令起作用*/
            width: 100px;
            height: 200px;
            border: hotpink 1px solid;
            float: left;
            list-style: none;
            margin-left: -1px;/*避免了相邻两个盒子之间边框重叠的问题*/

        }
        li:hover{
            border-color: khaki;
            z-index: 1;
        }

首先就是每个盒子在一行上显示。然后每次点击盒子的时候盒子本身的边框颜色会发生改变，起到一种提示的作用（表明现在鼠标正在这个盒子上面）。

给每个盒子加上了1px的边框线，这样就会使相邻两个盒子的边框重叠，变成2px。这明显是不符合项目要求的。此时最直接的解决方法就是给每个li添加margin-left:-1,这样在实际项目中就解决了这个问题。

        其次是每次点击的时候会显示整个盒子四周的边框线，但这种情况下除了最后一个盒子可以显示完整的边框下意外，其余盒子是无法显示右边的边框线的，因为之前加了margin:-1,这个属性。上一个盒子右边框被后面盒子的左边框压住了，所以无法显示。此时在li上面添加一个相对定位，然后在伪类选择器上添加一个z-index属性就可以了。