css篇——margin

最新推荐文章于 2024-12-30 09:40:09 发布

你若精彩_天自安排

最新推荐文章于 2024-12-30 09:40:09 发布

阅读量1.4k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端开发 CSS篇文章标签： css margin 前端开发

本文链接：https://blog.youkuaiyun.com/u010556394/article/details/50616985

前端开发同时被 2 个专栏收录

27 篇文章

订阅专栏

CSS篇

5 篇文章

订阅专栏

最近比较浮躁，需要沉淀一下。貌似还没认真写一篇博客，都是作为备忘录用，年末正好有点时间，借这个时间来整理整理。内容网上都有，做个记录和梳理。

margin是什么

margin，外边距，即模块与模块之间的距离。分两种：

一种父元素与子元素（或者可以说元素和它的内容）：

此时这个的M就是父元素和子元素之间的margin距离。但是，这种情况下如果父元素没有写border或者padding属性，则会产生一个垂直外边距合并问题，这个问题后面说。

二种元素与元素:

m代表A模块和B模块之间的margin距离。模块与模块之间margin可以随便用，但是如果margin参数包含负数和模块是块级元素还是内联元素又会有一点不同，同样后面说。

margin怎么用

margin: 10px 10px 10px 10px;//上、右、下、左。怎么记好记，就是以y轴正方向开始顺时针一周。margin参数不定，还有以下几种:

margin: 10px; //上10px、右10px、下10px、左10px

margin: 10px 20px; //上10px、右20px、下10px、左20px

margin: 10px 20px 30px; //上10px、右20px、下30px、左20px

margin:10px 20px 30px 40px; //上10px、右20px、下30px、左40px

这里需要强调一点的就是，参数没满四个，不代表没写的部分参数是0，没写的部分，下和上的参数一样，左和右的参数一样。

margin如果不想省略写，四个方向上右下左分别为margin-top,margin-right,margin-bottom,margin-left

垂直外边距合并问题

什么是垂直外边距合并问题，就是子元素的外边距和父元素的外边距相遇后它会合并为两个中最大的那个外边距，这里的元素不包括非置换内联元素。如下面例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.test {
width: 100px;
height: 50px;
background: yellow;
}
.test01 {
width: 200px;
height: 100px;
background: blue;
margin-top: 20px;
}
.test02 {
background: green;
width: 100px;
height: 50px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="test">test</div>
<div class="test01">
	<div class="test02">test02</div>
</div>
</body>
</html>

我本来只是想test02(绿色)距离test01（蓝色）顶部50px，test01(蓝色)距离test(黄色) 20px，结果test01(蓝色)整体距离test(黄色) 50px，test01(拦你色)和test02(绿色)都有一个外边距，取他们中大的那个，最后整体距离test(黄色) 50px，这就是垂直外边距合并，margin-top会向上一直寻找有效的border或者padding，所以我们只要给test添加个padding-top或者border-top就可以了，这样虽然解决了这个问题，但是界面都是设计好的，你现在给页面上多加了根线，肯定是不行的，所以最好的就是将margin换成padding。

什么时候用margin和padding

由垂直外边距问题我们可以总结一个大致的方法:

元素与元素需要隔开的时候用margin

元素与内容需要隔开的时候用padding

margin包含负参数

margin中的参数可以为负数，margin-top和margin-left以父元素为参考点，将自身元素向上和向左移动，margin-right和margin-bottom是以自己为参考点，让相邻元素向它移动。比如：

margin-top和margin-left好理解

margin-top: -10px;//即向上移动10px

margin-left: -20px;//即向左移动20px;

margin-right和margin-bottom，我用实例来讲，先讲margin-bottom

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	.test {
		width: 100px;
		height: 50px;
		background: yellow;
		margin-bottom: -30px;
	}
	.test01 {
		width: 200px;
		height: 100px;
		background: blue;
	}
	.test02 {
		background: green;
		width: 100px;
		height: 50px;
	}
	</style>
</head>
<body>
	<div class="test">test</div>
 	<div class="test01">
 		<div class="test02">test02</div>
 	</div>
</body>
</html>

我在test模块添加了个margin-bottom,就使结果由前一张图变成了后一张图

————》

从上面两个图片可以很清楚的看到，test模块里的margin-bottom：-30px;将test01（蓝色）模块向上面移动了30px

margin-right与margin-bottom同理

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	.test01 {
		width: 100px;
		height: 50px;
		background: yellow;
		float: left;
		margin-right: -50px;
	}
	.test02 {
		background: green;
		width: 100px;
		height: 50px;
		float: left;
	}
	</style>
</head>
<body>
	<div class="test01">test01</div>
 	<div class="test02">test02</div>
</body>

————》

test01模块里的margin-right:-50px;让test02模块向左移动了50px;

margin在块级元素和内联元素中的区别

margin不管是在块级元素、内联元素还是置换元素里都是可以用的，只是在内联元素中margin-top和margin-bottom不起作用，

margin常见bug

IE6双边距bug：这个bug很常见，如果经常做需要适配IE6的网页，应该都遇到过

现在这没有IE6浏览器，就不做实例了，大致说说

什么是双边距，就是一个块元素浮动的方向与外边距方向一样的的时候，会产生双倍的外边距，但多个浮动元素的时候，只有靠近浮动方向最近的一个元素会产生这现象，比如:

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	.test01 {
		width: 100px;
		height: 50px;
		background: yellow;
		float: left;
		margin-left: 20px;
	}
	.test02 {
		background: green;
		width: 100px;
		height: 50px;
		float: left;
	}
	</style>
</head>
<body>
	<div class="test01">test01</div>
 	<div class="test02">test02</div>
</body>

上面test01设置了浮动float:left;和左外边距margin-left:20px; 此时test01模块在IE6浏览器中就会距离左边40px,解决的方法有两个:

1，给IE6写一个hack，其值是正常值的一半，_margin-left: 10px; 不推荐

2，给tst01模块添加display:inline;

为什么display:inline;就可以解决了呢?产生这个bug的条件是块元素和浮动的方向要和外边距的方向一致两个条件，而display:inline;和display:inline-block；不存在外边距问题，而且float会将display:inline;变成display:inline-block;所以它还是可以设置宽高的。

margin: 0px auto在低版本IE上不能居中问题

我们一半将div居中使用的是margin: 0px auto;这在大多数浏览器上都是支持的，但是在低版本IE下却不能支持。

处理办法：

body {text-align: center;}

div {margin:0px auto;}

注意：如果设置了div向左向右浮动，再设置margin:0px auto;居中，也是不能居中的。