【布局技巧】margin负值的运用

最新推荐文章于 2022-06-15 10:05:45 发布

独特的懒人

最新推荐文章于 2022-06-15 10:05:45 发布

阅读量443

点赞数

分类专栏：前端开发案例文章标签： css html

本文链接：https://blog.csdn.net/dute_i/article/details/108004363

版权

前端开发同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

案例

8 篇文章 0 订阅

订阅专栏

使用场景:
像淘宝一样放在一个产品上的时候盒子会显示一个紫色的框子，但是当我们给所有的盒子边框，且浮动的时候。两个边框就会重叠，颜色就会很深，这里就给整个盒子margin-left:-1px
效果展示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin技巧</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .box ul li {
            float: left;
            width: 200px;
            height: 300px;
            border: 1px solid #ccc;
            /* 让盒子向左移动1个单位正好压住前面的盒子 */
            margin-left: -1px;
        }

        ul li:hover {
            /* 2.这里改成相对定位，相对定位会占有位置,他可以压住其他的盒子和标准流，这样写也有一个弊端，在这个盒子里可能其他的盒子都是相对定位，这个时候就不会显示在其他盒子上面了  */
            /*方法二: 给所有的父盒子都是相对定位，然后用z-index来调整盒子*/
            position: relative;
            border: 1px solid blue;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

</html>

方法二：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin技巧</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .box ul li {
            position: relative;
        }

        .box ul li {
            float: left;
            width: 200px;
            height: 300px;
            border: 1px solid #ccc;
            /* 让盒子向左移动1个单位正好压住前面的盒子 */
            margin-left: -1px;
        }

        ul li:hover {
            /* 1.这里改成相对定位，相对定位会占有位置,他可以压住其他的盒子和标准流   */
            /* position: relative; */
            z-index: 1;
            border: 1px solid blue;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

</html>

独特的懒人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【布局技巧】margin负值的运用

使用场景:像淘宝一样放在一个产品上的时候盒子会显示一个紫色的框子，但是当我们给所有的盒子边框，且浮动的时候。两个边框就会重叠，颜色就会很深，这里就给整个盒子margin-left:-1px<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s
复制链接

扫一扫