margin负值用法：类似于 table 的单元格边框合并。
使用场景：商品展示的边框合并。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/public.css">
<style>
/* margin 负值用法原理：利用 margin 负值合并多余边框 */
.box {
width: 585px;
height: 300px;
margin: 20px auto;
}
.box1,
.box2,
.box3,
.box4,
.box5,
.box6,
.box7,
.box8 {
position: relative;
float: left;
width: 100px;
height: 100px;
border: 3px solid #000;
/* 两行核心代码 */
margin-top: -3px;
margin-left: -3px;
}
.box div:hover {
/* position: relative; */
z-index: 100;
border: 3px solid orange;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
</div>
</body>
</html>
网友评论