浅谈如此有用的负margin

最新推荐文章于 2022-06-04 06:58:06 发布

筱葭

最新推荐文章于 2022-06-04 06:58:06 发布

阅读量458

点赞数 1

分类专栏： CSS 文章标签： CSS 负margin

本文链接：https://blog.csdn.net/zhouziyu2011/article/details/53857095

版权

CSS 专栏收录该内容

53 篇文章 1 订阅

订阅专栏

1、等高布局

请见：http://blog.csdn.net/zhouziyu2011/article/details/59056978

2、去除最右元素的右边距

当父元素的宽度固定时，每一行的最右端的元素的右边距多余，利用负margin可以去除多余的右边距。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style>
		body,ul,li{ 
			padding:0; 
			margin:0;
		}
		ul,li{ 
			list-style:none;
		}
		#container{
			width:320px;
			height:100px;
			background:red;
		}
		#container ul{
			margin-right:-10px;/**/
		}
		#container ul li{
			width:100px;
			height:100px;
			background:grey;
			margin-right:10px;
			float:left;
		}
	</head>
	<body>
		<div id="container">
			<ul>
				<li>First</li>
				<li>Second</li>
				<li>Third</li>
			</ul>
		</div>
	</body>
</html>

设置margin-right:-10px前：

设置margin-right:-10px后：

3、左右栏宽度固定，中间栏宽度自适应，要求中间栏优先加载的三栏布局。

左栏设置margin-left:-100%，右栏设置margin-left为右栏width的负值，中间栏设置margin-left为左栏width。

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<style>
			 body{
				margin:0;
				padding:0;
			}
			.middle{
				float:left;
				width:100%;
			}
			.content{
				margin:0 110px;
				background:grey;
				height:100px;
			}
			.left,.right{
				float:left;
				width:100px;
				height:100px;
				background:red;
			}
			.left{
				margin-left:-100%;
			}
			.right{
				margin-left:-100px;
			}
		</style>
	</head>
	<body>
		<div class="middle">
			<div class="content">Middle</div>
		</div>
		<div class="left">Left</div>
		<div class="right">Right</div>
	</body>
</html>

4、水平垂直居中

使用绝对定位将div定位到body的中心，使用负margin(div宽高的一半)，将div的中心拉回到body的中心，实现水平垂直居中的效果。

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<style>
			body{margin:0;padding:0;}
			#content{
				width:800px;
				height:400px;
				background:red;
				position:absolute;
				left:50%;
				top:50%;
				margin-left:-400px;
				margin-top:-200px;
			}
		</style>
	</head>
	<body>
		<div id="content"></div>
	</body>
</html>

筱葭

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
浅谈如此有用的负margin

1、去除最右元素的右边距当父元素的宽度固定时，每一行的最右端的元素的右边距多余，利用负margin可以去除多余的右边距。 body,ul,li{ padding:0; margin:0; } ul,li{ list-style:none; } #container{ width:320px; height:100px;
复制链接

扫一扫