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

最新推荐文章于 2024-03-06 23:02:33 发布

芒果水蜜桃

最新推荐文章于 2024-03-06 23:02:33 发布

阅读量116

点赞数

分类专栏：前端学习笔记文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/Meng19986082304/article/details/121081179

版权

前端学习笔记专栏收录该内容

27 篇文章 0 订阅

订阅专栏

设置边框为负值：解决边框合并1+1为2的问题。

<!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;
      height: 200px;
      width: 150px;
      border: 5px solid red;
      /*设置左边框为负值*/
      margin-left: -5px; 
    }
  </style>
</head>

<body>
  <ul>
    <li>55</li>
    <li>55</li>
    <li>55</li>
    <li>55</li>
    <li>55</li>
  </ul>

</body>

</html>

在这里插入图片描述
实现鼠标经过变颜色，有边框不显色的问题

ul li:hover {
  /* 为其添加相对定位 */
  position: relative;
  border: 5px solid blue;
}

<!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 {
      position: relative;
      float: left;
      list-style: none;
      height: 200px;
      width: 150px;
      border: 5px solid red;
      margin-left: -5px;
    }

    /* ul li:hover {
      // 方法一：如果盒子没有定位，则鼠标经过添加相对定位 
      position: relative;
      border: 5px solid blue;
    } */

    ul li:hover {
     /* 方法二：如果盒子都有定位，则用z-index提高层级性  */
      z-index: 1;
      border: 5px solid blue;
    }

  </style>
</head>

<body>
  <ul>
    <li>55</li>
    <li>55</li>
    <li>55</li>
    <li>55</li>
    <li>55</li>
  </ul>

</body>

</html>