CSS的margin负值运用：压住盒子的相邻框，实现淘宝商品页面的边框操作

VIP文章奶盖不加糖

于 2021-02-21 23:38:24 发布

阅读量355

点赞数

文章标签： css css3 html html5

本文链接：https://blog.csdn.net/qq_44156869/article/details/113926002

版权

margin负值之美

负边距+定位：水平垂直居中。
一个绝对定位的盒子，利用父级盒子的 50%，然后往左（上）走自己宽度的一半，可以实现盒子水平垂直居中。

压住盒子的相邻框

如淘宝的商品页面：
在这里插入图片描述

案例：

    <style>
        div {
    
            /*浮动的盒子是紧贴在一起的*/
            float: left;
            width: 200px;
            height: 300px;
            border: 1px solid #ccc;
            margin-left: -1px;
            margin-top: -1px;

        }
        div:hover {
    
            /*我要让当前鼠标经过的这个div 升到最高处来就好了*/
            /*定位的盒子是最高层的*/
            border:1px solid #f40;
            /*我们只要保证当前的这个盒子 是定位 就会压住 标准流和浮动盒子*/
            position:relative;
            /*我们只能用相对定位 ，它是占位置的*/
        }

    </style>
</head>
<body>
    <div></div>

最低0.47元/天解锁文章

奶盖不加糖

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS的margin负值运用：压住盒子的相邻框，实现淘宝商品页面的边框操作

margin负值之美负边距+定位：水平垂直居中。一个绝对定位的盒子，利用父级盒子的 50%，然后往左（上）走自己宽度的一半，可以实现盒子水平垂直居中。压住盒子的相邻框如淘宝的商品页面：案例： <style> div { /*浮动的盒子是紧贴在一起的*/ float: left; width: 200px; height: 300px; bor
复制链接

扫一扫

专栏目录