CSS属性之margin

1.margin与元素尺寸

（1）元素尺寸：就是元素的border box的尺寸，包括padding和border。也就是JS中offsetwidth和offsetHeight,JQ中$().width()和$().height()，有时候也称为“元素偏移尺寸”。

（2）元素内部尺寸：就是元素的padding box的尺寸，包括padding但不包括border。也就是JS中clientWidth和clientHeight，JQ中的$().innerWidth()和$().innerHeight()，有时候也称为“元素可视尺寸”。

（3）元素外部尺寸：就是元素的margin box的尺寸，包括padding，border，margin。在JS中没有对应的DOM API，JQ中的$().outerWidth()和$().outerHeight()。

margin改变元素内部尺寸

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.fater{width:300px;border: 1px solid red;height: 100px;margin: 20px;}
		.son{margin:0 -20px;border: 1px solid;height：100px;}
	</style>
</head>
<body>
		<div class="fater">
			<div class="son"></div>
		</div>		
</body>
</html>

子元素冲出父元素的包围

一侧定宽的两栏自适应布局效果

让图片进行左浮动，文字部分 div 设置 margin-left

2. margin 的百分比值

与 padding 属性一样，margin 的百分比值无论是水平方向还是垂直方向都是相对于宽度计算的。

3. margin 塌陷

当两个嵌套块级元素都设置了 margin-top 时，内层元素的 margin-top 会消失，而外出元素的 margin-top 取两者最大值，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   .fater{width:200px;height:200px;background-color: #EB0D0D;margin-top: 50px;}
	   .son{width:100px;height:100px;background-color: #1F14C9;margin-top: 100px;}

	</style>
</head>
<body>
	<div class="fater">
	 <div class="son"></div>
	</div>
	
</body>
</html>

解决办法：

父元素设置 border-top 或 padding-top 值；
父元素和子元素之间添加内联元素进行分隔；
父元素设置块级格式化上下文元素。

overflow:hidden;

display:inline-block;

position:absolute;

float:left;

4. margin 合并

块级元素的 margin-bottom 会与下一个兄弟块级元素的 margin-top 合并

此问题只需单独设置一个就好。

5. margin : auto

margin-left : auto 实现右对齐效果

 .fater{width:800px;height:200px;background-color: #947777;margin-top: 50px;}
 .son{width:200px;height:200px;background-color: #1F14C9;margin-left: auto;}

只适用于单个块级元素居右对齐。

margin ：auto 实现垂直居中对齐

.fater{width:800px;height:200px;background-color: #947777;margin-top: 50px;position: relative;}
.son{width:200px;height:50px;background-color: #1F14C9;margin: auto;position: absolute;left: 0;right: 0;top: 0;bottom: 0;}

IE8以上浏览器兼容

6. margin 无效情形解析

（1）display 计算值 inline 的非替换元素的垂直 margin 是无效的。

（2）margin 塌陷和 margin 合并的时候只有绝对值最大的 margin 值有效。

（3）和当前元素定位方向不一样的 margin 有效，但无定位效果，只对后面元素或父元素影响。

如果设置 margin - right 或 margin - bottom 则无法移动 son 元素

（4）浮动元素的相邻元素的同浮动方向的 margin 小于浮动元素宽度无效

当 margin-left 大于200px才有效果。

猜你喜欢