如何突出显示某个盒子？

最新推荐文章于 2024-05-22 09:24:58 发布

沉香babylo

最新推荐文章于 2024-05-22 09:24:58 发布

阅读量327

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_45923409/article/details/106572064

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

突出显示某个盒子有两部分组成，分别是margin负值和定位。
一、首先是margin负值
margin负值可以实现覆盖盒子左右或上下方被其他盒子压住的边框不变粗假如盒子边框为1px.则margin-left:-1px可使左侧盒子向左移动1px;正常情况下盒子与盒子之间并排排列，会使两个盒子之间的边框变为2px，右侧盒子向左移动1px后右侧盒子的左边框压住左侧盒子的右边框使得边框更规范左右边框仍保持1px不变，代码如下:

<!DOCTYPE html>
<html lang="en"><head>    <meta charset="UTF-8">    <title>突出显示某个盒子</title>    <style>        div{            float:left;            width: 200px;            height: 300px;            border:1px solid #ccc;            margin-left:-1px;            margin-top:-1px;        }            </style></head><body>     <div></div>     <div></div>     <div></div>     <div></div>     <div></div>     <div></div>     <div></div>     <div></div>     <div></div>     <div></div>     <div></div>     <div></div>    </body></html>

二、是鼠标悬停时的边框改变颜色利用div:hover{}来实现如果不设position会导致鼠标悬停时盒子被压住的边框样式不变，还是原来的颜色，因此需要使鼠标悬停的盒子升上来，采用定位来解决由于标准流在最下层，浮动在中间，定位在最上层，所以采用定位，但定位又有三种定位机制，其中绝对定位不占位置去掉，固定定位在页面中的位置不变所以也不能用固定定位，所以只能采用相对定位。

<!DOCTYPE html>
<html lang="en"><head>    <meta charset="UTF-8">    <title>突出显示某个盒子</title>    <style>        div{            float:left;            width: 200px;            height: 300px;            border:1px solid #ccc;            margin-left:-1px;            margin-top:-1px;        }        div:hover {            border:1px solid #f40;            position:relative;            /*如果不设position会导致鼠标悬停时盒子被压住的边框样式不变，还是原来的颜色，因此需要使鼠标悬停的盒子升上来，采用定位来解决由于标准流在最下层，浮动在中间，定位在最上层，所以采用定位，但定位又有三种定位机制，其中绝对定位不占位置去掉，固定定位在页面中的位置不变所以也不能用固定定位，所以只能采用相对定位。*/        }    </style></head><body>     <div></div>     <div></div>     <div></div>     <div></div>     <div></div>     <div></div>     <div></div>     <div></div>     <div></div>     <div></div>     <div></div>     <div></div>    </body></html>