给所有div加上边框=10px之后，再给所有div设置margin-left与margin-top;以及浮动（float:left）
因此时需要鼠标悬停效果：所以设置给div设置伪类:hover,然因浮动脱离了标准流。所以覆盖了div的边框,所以鼠标悬停时div边框显示不全设置定位（position:releative;）之后；
经测验：在html中的层级关系为；标准流<浮动流<定位；所以现在鼠标悬停时div所有的边框都会显示，可以模仿淘宝案例等；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 400px;
height: 200px;
border:10px solid #ccc;
float: left;
margin-left: -10px;
margin-top:-10px; }
div:hover{
border-color: red;
position: relative;
}
.content{
width: 1620px;
height: 600px;
padding: 20px;
border:none;}
</style>
</head>
<body>
<div class="content">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
源码
时间： 2024-10-12 23:52:04