【CSS】margin 外边距负值使用案例 ( 正常外边距 | 使用外边距负值实现边框重叠 | 重叠边框突出显示 )

韩曙亮

发布于 2023-04-24 11:20:19

1.2K0

发布于 2023-04-24 11:20:19

文章被收录于专栏：韩曙亮的移动开发专栏

一、正常外边距案例

margine 正常情况下使用 , 设置 float 浮动 , 使得相邻的盒子模型紧贴在一起 ;

如果设置边框 , 则相邻的边框会重叠在一起 , 导致边框变粗 ;

代码示例 :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>margin 负值示例</title>
	<style>
		div {
			/* 浮动元素紧贴在一起 */
			float: left;
			
			/* 盒子模型尺寸 200x200 像素 */
			width: 100px;
			height: 100px;
			
			/* 设置 1 像素边框 */
			border: 1px solid #ccc;
		}
	</style>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</body>
</html>

显示效果 :

邻近元素的外边框重叠在一起变粗的效果 :

二、使用外边距负值实现边框重叠

使用外边距负值实现边框重叠 , 设置左侧 -1 像素外边距 , 由于浮动元素都是紧贴在一起的 , 设置 -1 像素外边距就会在紧贴的基础上向左 1 像素 ;

同理 , 设置上方 -1 像素外边距也是这个原理 ;

代码示例 :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>margin 负值示例</title>
	<style>
		div {
			/* 浮动元素紧贴在一起 */
			float: left;
			
			/* 盒子模型尺寸 200x200 像素 */
			width: 100px;
			height: 100px;
			
			/* 设置 1 像素边框 */
			border: 1px solid black;
			
			/* 设置左侧 -1 像素外边距
			   由于 浮动元素 都是紧贴在一起的 
			   设置 -1 像素外边距 就会在紧贴的基础上 向左 1 像素*/
			margin-left: -1px;
			/* 设置上方 -1 像素外边距 */
			margin-top: -1px;
		}
	</style>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</body>
</html>

显示效果 :

三、重叠边框突出显示案例

1、使用相对定位

三种布局机制中 , 标准流在最底层 , 浮动盒子在中间层 , 定位盒子在最上层 ;

这里使用定位中的相对定位 , 相对定位仍然会占用原来的位置 , 元素还在原来的位置不动 ;

如果使用了绝对定位 , 原来的位置就会消失 , 元素默认显示在定位的父容器左上角 ;

代码示例 :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>margin 负值示例</title>
	<style>
		div {
			/* 浮动元素紧贴在一起 */
			float: left;
			
			/* 盒子模型尺寸 200x200 像素 */
			width: 100px;
			height: 100px;
			
			/* 设置 1 像素边框 */
			border: 1px solid gray;
			
			/* 设置左侧 -1 像素外边距
			   由于 浮动元素 都是紧贴在一起的 
			   设置 -1 像素外边距 就会在紧贴的基础上 向左 1 像素*/
			margin-left: -1px;
			/* 设置上方 -1 像素外边距 */
			margin-top: -1px;
		}
		
		/* 鼠标经过 div 盒子上方时 盒子的样式 */
		div:hover {
			/* 突出显示的盒子设置红色边框 */
			border: 1px solid red;
			/* 设置相对定位 该定义可以占有原来的位置 */
			position: relative;
		}
	</style>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</body>
</html>

默认显示效果 :

鼠标移动到盒子上方 , 突出显示的效果 :

2、使用 z-index 设置定位盒子层级

父元素相对定位 , 内部子元素可以使用绝对定位任意摆放位置 , 大部分盒子都有该要求 ;

如果将所有的盒子都设置相对定位 , 则使用 z-index 决定哪个盒子在最上方 ;

代码示例 :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>margin 负值示例</title>
	<style>
		div {
			/* 父元素相对定位 内部子元素可以使用绝对定位任意摆放位置
   			   大部分盒子都有该要求*/
			position: relative;
		
			/* 浮动元素紧贴在一起 */
			float: left;
			
			/* 盒子模型尺寸 200x200 像素 */
			width: 100px;
			height: 100px;
			
			/* 设置 1 像素边框 */
			border: 1px solid gray;
			
			/* 设置左侧 -1 像素外边距
			   由于 浮动元素 都是紧贴在一起的 
			   设置 -1 像素外边距 就会在紧贴的基础上 向左 1 像素*/
			margin-left: -1px;
			/* 设置上方 -1 像素外边距 */
			margin-top: -1px;
		}
		
		/* 鼠标经过 div 盒子上方时 盒子的样式 */
		div:hover {
			/* 突出显示的盒子设置红色边框 */
			border: 1px solid red;
			
			/* 所有的盒子都是相对定位 则使用 z-index 决定哪个盒子在最上方 */
			z-index: 1;
		}
	</style>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</body>
</html>

默认显示效果 :

鼠标移动到盒子上方 , 突出显示的效果 :

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-04-17，如有侵权请联系 cloudcommunity@tencent.com 删除

css