css布局技巧-margin负值巧妙运用

最新推荐文章于 2022-08-10 21:16:50 发布

爱音斯坦牛

最新推荐文章于 2022-08-10 21:16:50 发布

阅读量1k

点赞数 19

分类专栏：软磨 css 文章标签： css 前端 css3

本文链接：https://blog.csdn.net/qq_57421630/article/details/122912487

版权

软磨 css 专栏收录该内容

18 篇文章 61 订阅

订阅专栏

📋 个人简介

💖 作者简介：大家好，我是阿牛😜
📝 个人主页：馆主阿牛🔥
🎉 支持我：点赞👍+收藏⭐️+留言📝
📣 系列专栏：css🍁
💬格言：迄今所有人生都大写着失败，但不妨碍我继续向前！🔥

请添加图片描述

上期传送门：
👉css中的选择器
👉css盒子模型及其实战案例（上）
👉css盒子模型及其实战案例（下）
👉css网页布局之浮动及其实战案例（超详细）
👉css中的定位详解
👉css中元素的显示与隐藏
👉我用css精灵图拼接了自己的英文名字，不会还有人不知道精灵图技术吧
👉css三角的做法及其案例
👉css布局技巧-css三角巧妙运用
👉css布局技巧-文字围绕浮动元素巧妙运用

这里写目录标题

问题的产生

我们要做几个在一行显示且紧紧挨在一起的盒子，会出现下图情况
在这里插入图片描述
我们利用float：left;浮动，会发现中间的边框变粗，并没有合并。

解决

可以用margin-left：-1; 解决，正好压住相邻盒子边框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li {
            float: left;
            list-style: none;
            width: 150px;
            height: 200px;
            border: 1px solid red;
            margin-left: -1px;
        }

    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>

在这里插入图片描述
但这样会出现问题：
当我们有需求鼠标经过某个盒子，盒子边框变色时

 ul li:hover{
           border: 1px solid blue;
        }

在这里插入图片描述
会出现另一个边被后面的压住，不显示。
解决：
如果盒子没有定位，当鼠标指向当前盒子时添加相对定位（会压住其他盒子的边）（保留位置），如果盒子本身有定位，则当鼠标指向当前盒子时添加
z - index。

1、盒子没有定位

ul li {
            float: left;
            list-style: none;
            width: 150px;
            height: 200px;
            border: 1px solid red;
            margin-left: -1px;
        }
        ul li:hover{
            position: relative;  /*当鼠标指向当前盒子时添加相对定位*/
            border: 1px solid blue;
        }

2、盒子本身有定位

ul li {
            position: relative;
            float: left;
            list-style: none;
            width: 150px;
            height: 200px;
            border: 1px solid red;
            margin-left: -1px;
        }
        ul li:hover{ 
            z-index: 1; 
            border: 1px solid blue;
        }