1、margin负值应用
1.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;
width: 100px;
height: 180px;
border: 1px solid red;
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
解决:使用margin负值
<!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;
width: 100px;
height: 180px;
border: 1px solid red;
list-style: none;
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>
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;
width: 100px;
height: 180px;
border: 1px solid red;
list-style: none;
margin-left: -1px;
}
ul li:hover{
border: 1px blue solid;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
解决:
(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;
width: 100px;
height: 180px;
border: 1px solid red;
list-style: none;
margin-left: -1px;
}
ul li:hover{
position: relative;
border: 1px blue solid;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
(2)盒子本身有定位,使用z-index提高层级
<!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;
width: 100px;
height: 180px;
border: 1px solid red;
list-style: none;
margin-left: -1px;
}
ul li:hover{
/* position: relative; */
border: 1px blue solid;
z-index: 1 ;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>