📋 个人简介
- 💖 作者简介：大家好，我是阿牛😜
- 💬格言：迄今所有人生都大写着失败，但不妨碍我继续向前！🔥
@TOC
问题的产生
我们要做几个在一行显示且紧紧挨在一起的盒子，会出现下图情况
我们利用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;
}
