📋 个人简介
上期传送门:
👉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;
}