盒模型相关内容总结

maoting

浏览: 47386 次
性别:
来自: 北京

最近访客更多访客>>

iy2017

eyeti123

小动物不困

吴小帅啊

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

margin padding width的值是百分数时，相对于包含块的width进行计算

height的值是百分数时，相对于包含块的height进行计算。

外边距合并

1.相邻盒子之间的margin:行内元素之间的水平margin不会合并（塌陷）

2.块级元素之间的竖直margin会合并（塌陷）。

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：

3.嵌套盒子之间的margin（针对DIV）:如果父div未设置高度、宽度，则会根据子div计算高度，而宽度则仍为整行。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>父子块的margin</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			div.father {						/* 父div */
				background-color: #fffebb;
				font-family: Arial, Helvetica, sans-serif;
				font-size: 12px;
				padding: 10px;
				border: 1px solid #000000;
				width:100%; height:auto !important;height:1%; zoom:1;
			}
			div.son {						/* 子div */
				background-color: #a2d2ff;
				margin-top: 30px;
				margin-bottom: 0px;
				padding: 15px;
				border: 1px dashed #004993;
				width: 100px;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="son">
				子div
			</div>
		</div>
	</body>
</html>

4.如果父div设置的高度、宽度小于子div时，IE6则仍根据子div设置高度、宽度；其他浏览器保持原来的div高度、宽度，子div溢出。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>设置父块的高度</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			div.father {						/* 父div */
				background-color: #fffebb;
				font-family: Arial, Helvetica, sans-serif;
				font-size: 12px;
				padding: 10px;
				border: 1px solid #000000;
				height: 40px;				/* 设置父div的高度 */
				width: 100px;
			}
			div.son {						/* 子div */
				background-color: #a2d2ff;
				margin-top: 30px;
				margin-bottom: 0px;
				padding: 15px;
				border: 1px dashed #004993;
				width: 100px;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="son">
				子div子div子div子div子div子div子div子div
			</div>
		</div>
	</body>
</html>

Firefox IE6 IE7

5.IE6、IE7浏览器下margin无效的解决方法。（详细解析参考：IEbug收集）

6.div嵌套时y轴上padding和margin的问题。（详细解析参考：IEbug收集）

7.怪异模式下（包括IE6、IE7的标准模式）的IE：正常；其他浏览器（标准模式下的IE8和IE9、Firefox Chrome Safari）：y轴上父padding=0且border=0时，子div到父div的距离为0。（详细解析参考：IEbug收集）

8.如果width为固定值，margin-left、margin-right都为auto,居中显示。

如果width为auto，margin-left或margin-right有一个为auto，auto->0.width设置为所需的值。

如果三者都为auto，margin-left和margin-right都为0，width设置为所需的值。

9.margin为负值时

要记住，七个水平属性的总和要等于父元素的width.只要所有属性都大于或等于0的，元素就不会大于其父元素的内容区。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<head>
		<title>无标题文档</title>
		<style type="text/css">
			div.container{
				width:400px;
				border:3px solid black;
				margin:0 auto;
			}
			p.rightNoWidth{
				margin-right:-50px;
				width:auto;
			}
			p.leftNoWidth{
				margin-left:-50px;
				width:auto;
			}
			p.right{
				margin-right:-50px;
				width:400px;
			}
			p.left{
				margin-left:-50px;
				width:400px;
			}
			p.rightL{
				margin-left:20px;
				margin-right:-50px;
				width:auto;
			}
			p.rightLW{
				margin-left:20px;
				margin-right:-50px;
				width:400px;
			}
		</style>
	</head>
	<body>
		<div class="container"><pre>margin-right:-50px;width:auto;</pre>
			<p class="rightNoWidth">
				margin-right no Width minus test margin-right minus test a b c d e f g h i g k margin</p>
		</div>
		<div class="container"><pre>margin-left:-50px;width:auto;</pre>
			<p class="leftNoWidth">margin-left no Width minus test margin left minus test a b c d e f g h i g k</p>
		</div>
		<div class="container"><pre>margin-right:-50px;width:400px;</pre>
			<p class="right">margin-right minus test margin-right minus test a b c d e f g h i g k </p>
		</div>
		<div class="container"><pre>margin-left:-50px;width:400px;</pre>
			<p class="left">margin-left minus test margin-left minus test a b c d e f g h i g k</p>
		</div>
		<div class="container"><pre>margin-left:20px;margin-right:-50px;width:auto;</pre>
			<p class="rightL">margin-right:-50px;width:auto;</pre>margin-left minus test margin-left minus test a b c d e f g h i g k</p>
		</div>
		<div class="container"><pre>margin-left:20px;margin-right:-50px;width:400px;</pre>
			<p class="rightLW">margin-left minus test margin-left minus test a b c d e f g h i g k</p>
		</div>
	</body>
</html>

IE6

IE7

Firefox(Safari Chrome IE8)

10.负垂直外边距：如果垂直外边距都设置为负值，浏览器会取两个外边距绝对值的最大值。

如果一个正外边距与一个负外边距合并，会从正外边距减去一个负外边距的绝对值。

11.注意：上下外边距为负时有一种“拉近”效果。

div.neg{
	margin-top: -50px;
	margin-right: 10px;
	border: 3px solid gray;
}
<div style="width: 420px;background-color: silver;padding: 10px;margin-top: 50px;border: 1px solid">
	<div class="neg"> a paragraph</div>
</div>

div.neg{
	margin-bottom: -30px;
	margin-right: 10px;
	border: 3px solid gray;
}
<div style="width: 420px;background-color: silver;padding: 10px;margin-top: 50px;border: 1px solid">
	<div class="neg"> a paragraph</div>
</div>
<div style="border:1px solid"> next div </div>

next div向上拉近了30像素。

12.正负外边距合并

li{margin-bottom:20px;background:blue}
ul{margin-bottom:-15px;}
h1{margin-top:-18px;background:yellow}

<ul>
	<li> A list item</li>
	<li> Another list item</li>
</ul>
<h1>A Heading-1</h1>

两个负外边距中较大的一个（-18px）增加到了最大的正外边距上（20px）,这就得到了20px-18px=2px.因此，列表项内容底端与H1内容顶端之间只有2个像素的距离

背景设置Background

1.给元素设置background-color背景色时，IE6和IE7作用的区域为content+padding，而firefox则是content+padding+border.这在背景为粗虚线时表现的特明显。不要误认为差别是因为IE和Firefox设置背景的基准点不同。实际上它们都是以padding为设置背景的基准点的。以padding的左上角为基准点平铺背景图像。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#outerBox{
	border:30px blue dashed;
	background:url("cat.jpg");
	width: 500px;
	height: 480px;
	padding:30px;
}
</style>
</head>
<body>
	<div id="outerBox">
		sss<br>
		sss<br>
		sss<br>
		sss<br>
		sss<br>
		sss<br>
	</div>
</body>