布局技巧-margin负值运用

最新推荐文章于 2024-03-30 01:39:28 发布

安澜仙王

最新推荐文章于 2024-03-30 01:39:28 发布

阅读量128

点赞数

分类专栏： # CSS 文章标签： css html html5

本文链接：https://blog.csdn.net/sinat_28317385/article/details/120070132

版权

CSS 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

本文展示了如何使用CSS实现盒子模型的布局，使相邻盒子边框无缝对接，并在鼠标悬停时通过调整层级或z-index改变盒子的视觉效果。通过设置负margin和相对定位，可以达到盒子重叠的效果；而hover状态下，通过增加z-index或相对定位，可以突出显示当前盒子。

摘要由CSDN通过智能技术生成

在这里插入图片描述
1，让每个盒子margin往左侧移动 -1px 正好压住相邻盒子边框
2，鼠标经过某个盒子的时候，提高当前盒子的层级即可(如果没有有定位，则加相对定位(保留位置)，如果有定位，则加z-index)

加相对定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul li {
				float: left;
				list-style: none;
				width: 150px;
				height: 200px;
				border: 1px solid #00B057;
				margin-left: -1px;
			}
			
			ul li:hover {
				position: relative;
				border: 1px solid #0072C6;
			}
		</style>
	</head>
	<body>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</body>
</html>

加z-index

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul li {
				position: relative;
				float: left;
				list-style: none;
				width: 150px;
				height: 200px;
				border: 1px solid #00B057;
				margin-left: -1px;
			}
			
			ul li:hover {
				z-index: 1;
				border: 1px solid #0072C6;
			}
		</style>
	</head>
	<body>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</body>
</html>