盒模型相关内容总结

于 2012-11-13 10:03:24 发布
阅读量139 收藏
点赞数
分类专栏： css 文章标签： xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/maotingmaoting/article/details/84355776
版权

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>

2.body是一个特殊的盒子，它的背景色会延伸到margin的部分。

 

参考文献：CSS彻底研究、精通CSS

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值