转载：margin负值的应用

新时代的弩力

已于 2022-06-27 09:51:22 修改

阅读量514

点赞数

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

于 2019-12-20 13:39:16 首次发布

本文链接：https://blog.csdn.net/qq_42372534/article/details/103630885

版权

CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

总结

对于没有宽度的元素，margin-left，margin-right的负值会增加元素的宽度，此时相当于padding，但不会影响布局。
对于有宽度的元素，margin-left，margin-right负值会往对应的方向位移，并且会处于后面的元素位移后覆盖前面的元素。
对于margin-left，margin-top，负值是将元素往左往上平移，对于margin-right，margin-bottom，负值是影响后面的元素往左往上贴进平移。
对文档流无影响。
对浮动元素，和定位元素，可以起到位移定位的作用

1. 双飞翼布局

两头固定，中间自适应的布局，可以利用margin的负值来调整浮动元素的位置来实现。
结构如下：

		<div class="main">
			<div class="content">我是内容</div>
		</div>
		<div class="fl">zuo</div>
		<div class="fr">you</div>

css如下：

		<style type="text/css">
			*{
				padding:0;
				margin: 0;
			}
			div{
				height: 50px;
			}
			.fl{
				background-color: #008000;
				width: 100px;
				float: left;
				margin-left: -100%;/*左外边距-100%，往左位移*/
			}
			.main{
				float: left;
				width: 100%;/*自适应*/
			}
			.content{
				background-color: red;
				margin: 0 101px;/*中间框左右边距，保证内容不会跑到左右两头*/
				border: 1px #000000 dotted;
				height: 500px;
			}
			.fr{
				background-color: #336699;
				width: 100px;
				float: left;
				margin-left: -100px/*往左贴近*/;
			}
		</style>

效果如下，左右拉动，中间自适应，两头大小不变。
在这里插入图片描述

2. 去除列表下边框

使用无序列表来模仿表格，此时最后一个li下边框和ul的边框重合，可以通过margin-bottom:-1px,使得ul的下边框往上移1px和li得下边框重合。

不使用时得情况如下：
在这里插入图片描述
使用之后如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			ul{
				width: 300px;
				margin: 100px auto;
				border: 1px black solid;
			}
			li{
				list-style: none;
				border-bottom: 1px black solid;
				margin-bottom: -1px;/*使得下一个元素往上靠*/
			}
			
		</style>
	</head>
	<body>
		<ul>
			<li>li</li>
			<li>li</li>
			<li>li</li>
			<li>li</li>
			<li>li</li>
		</ul>
	</body>
</html>

在这里插入图片描述

3. 去除列表右边框

第一种方法：利用负margin可以增加宽度不确定得元素宽度这个特点，可以去除列表右边框，此时由于宽度增加，该元素添加border和background都会受到宽度得影响。好处：不用算内层容器的宽度。
第二种方法：利用最外层的盒子overflow:hidden来隐藏掉内层容器的超出部分。要算内层容器的宽度。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			.container{
				margin: 100px auto;
				width: 690px;
				border: 1px #000000 solid;
				/* overflow: hidden; *//*这个配合.list中width:720px是利用overflow:hidden溢出裁剪*/
			}
			.list{
				overflow: hidden;
				margin-right: -30px;
				/* width: 720px; */
			}
			li{
				list-style: none;
				width: 150px;
				height: 150px;
				background-color: #FF4500;
				float:left;
				margin-right: 30px;
				margin-bottom: 30px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<ul class="list">
				<li>这是一个图片占位元素</li>
				<li>这是一个图片占位元素</li>
				<li>这是一个图片占位元素</li>
				<li>这是一个图片占位元素</li>
				<li>这是一个图片占位元素</li>
				<li>这是一个图片占位元素</li>
				<li>这是一个图片占位元素</li>
				<li>这是一个图片占位元素</li>
				<li>这是一个图片占位元素</li>
				<li>这是一个图片占位元素</li>
				<li>这是一个图片占位元素</li>
				<li>这是一个图片占位元素</li>
			</ul>
		</div>
	</body>
</html>

第一种效果如下：
在这里插入图片描述
给.list盒子添加背景颜色后

.list{
…
background-color: #336699;
}

在这里插入图片描述

第二种方法效果如下：
在这里插入图片描述
给.list盒子添加背景颜色后

.list{
…
background-color: #336699;
}

在这里插入图片描述

4. 负外边距+定位，实现盒子的居中

该方法前提是盒子的宽高已知，如果不知道，可以使用translate3d(-50%,-50%,0)达到和负外边距相同的效果。

5. 多列未知等高布局

利用margin-bottom为负值会减少css读取元素高度的特性，加上padding-bottom和overflow:hidden,就能做一个未知高度的多列等高布局（当然也可以用table）

<style type="text/css">
			.container{
				margin: 0 auto;
				width: 100%;
				overflow: hidden;
			}
			.left{
				width: 33.3%;
				/* height: 50px; *//*以内容撑开高度*/
				float: left;
				background-color: #008000;
				padding-bottom: 3000px;
				margin-bottom: -3000px;
				border: 10px #000000 dashed;
			}
			.main{
				width: 33.3%;
				height: 100px;
				float: left;
				background-color: red;
				padding-bottom: 3000px;
				margin-bottom: -3000px;
			}
			.right{
				width: 33.3%;
				/* height: 10px; */
				float: left;
				background-color: blue;
				padding-bottom: 3000px;
				margin-bottom: -3000px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="left">
				这是height50px 
				<div style="background-color: #87CEEB;">这是新的div</div>
				<div style="background-color: #87CEEB;">这是新的div</div>
				<div style="background-color: #87CEEB;">这是新的div</div>
				<div style="background-color: #87CEEB;">这是新的div</div>
				<div style="background-color: #87CEEB;">这是新的div</div>
				<div style="background-color: #87CEEB;">这是新的div</div>
				<div style="background-color: #87CEEB;">这是新的div</div>
				<div style="background-color: #87CEEB;">这是新的div</div>
				<div style="background-color: #87CEEB;">这是新的div</div><div style="background-color: #87CEEB;">这是新的div</div>
				<div style="background-color: #87CEEB;">这是新的div</div>
			</div>
			<div class="main">这是height100px</div>
			<div class="right">这是height150px</div>
		</div>
	</body>

在这里插入图片描述虽然设置了3000的内边距，但是我用－3000的外边距去抵消掉，所以对于父元素来说（上文所说的css能读取的高度），他还是原来的高度（但其自身实际高度为3000px+本来高度），然后父元素在加上overflow:hidden;以最高的高度进行裁切，所以就有了看起来“等高”的3个div。

转载出处

新时代的弩力

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
转载：margin负值的应用

两头固定，中间自适应的布局，可以利用margin的负值来调整浮动元素的位置来实现。结构如下： <div class="main"> <div class="content">我是内容</div> </div> <div class="fl">zuo</div> <div class="fr"&gt......
复制链接

扫一扫