css中如何让紧挨着的盒子边框像素一样

淩亂°似流年 2022-10-25 14:17 200阅读 0赞

**在制作紧挨盒子的时候，你是否也遇到过这样的情况？**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70]  
这中间重叠的边框，根本不是我想要的效果呀~  
那应该怎么办呢，此时我们可以利用margin负值试试看。  
代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            ul li {
        
                width: 200px;
                height: 300px;
                border: 2px solid pink;
                list-style: none;
                float: left;
                /* 因为边框大小为2px,所以此时每个右边框向左移动2px，就会让前一个的右边框和后一个的左边框出现重叠的效果，而不是拼合 */
                margin-right: -2px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </body>
    </html>

运行结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 1]  
有没有疑惑，同时移动，不应该还是重合吗？  
答案:这和我们的浮动有关系，我们每个 li 都设置了float:left;因此第二个盒子，会先靠左float，和左就变成4px了，然后再-2px，因此，4+（-2）=2px

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70]: /images/20221024/f3a40d775fa942cc8a8f141ba3460b2e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 1]: /images/20221024/518425c815684c35a7b2097b02b0900d.png