盒子边距的概念和各种现象

¶盒子模型的高度和宽度的概念

内容的宽度和高度

就是通过对标签的width/height属性设置的值。
元素的宽度和高度

宽度=左边框+左内边距+width+右内边距+右边框

高度=上边框+上内边距+height+下内边距+下边框
元素空间的宽度和高度

宽度=左外边距+左边框+左内边距+width+右内边距+右边框+有外边距

高度=上外边距+上边框+上内边距+height+下内边距+下边框+下外边距

¶盒子模型外边距叠加和合并的现象

在默认布局的水平方向上，默认情况下外边距是会叠加的。盒子之间的距离等于两个盒子各自的相邻外边距之和。
在默认布局的垂直方向上，默认情况下外边距是不会叠加的，而是会出现合并现象，两个盒子中相邻外边距大的决定盒子之间的距离。

水平方向外边距叠加现象

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>水平方向外边距叠加现象</title>
	<style type="text/css">
		.box1{
			width: 200px;
			height: 200px;
			background-color: blue;
			margin-bottom: 50px;
		}
		.box2{
			width: 200px;
			height: 200px;
			background-color: red;
			margin-top: 100px;
		}
	</style>
</head>
<body>
	<div class="box1">我是box1</div>
	<div class="box2">我是box2</div>
</body>
</html>

垂直方向外边距合并现象

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>垂直方向外边距合并现象</title>
	<style type="text/css">
		.box1{
			width: 200px;
			height: 200px;
			background-color: blue;
			display: inline-block;
			margin-right: 50px;
		}
		.box2{
			width: 200px;
			height: 200px;
			background-color: red;
			display: inline-block;
			margin-left: 100px;
		}
	</style>
</head>
<body>
	<div class="box1">我是box1</div>
	<div class="box2">我是box2</div>
</body>
</html>

¶padding和border对元素宽高的影响

增加padding之后元素的宽高也会发生改变，但是内容的宽高不改变。如果增加padding之后仍要保持元素的宽高，那么就要减去内容的宽高。

同理，增加border之后元素的宽高也会发生改变，但是内容的宽高不改变。如果增加border之后仍要保持元素的宽高，那么就要减去内容的宽高。

注意：margin的增加不会对元素的宽高产生影响。

css3中新增了一个box-sizing的属性，这个属性可以保证给盒子增加padding和border之后，元素的宽高不会发生改变，原理与上述一样，即自动减去内容的宽高。

box-sizing的取值：

content-box # 元素的宽高=边框+内边距+内容宽高
border-box #元素的宽高=原本设置的width/height值。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>padding和border对元素宽高的影响</title>
	<style type="text/css">
		/*增加padding之后，在不修改width/height值的情况，元素的宽高也会发生改变，但是内容的宽高不改变。*/
	    .box1{
			width: 100px;
			height: 100px;
			background-color: pink;
		}
		.box1{
			padding: 10px;
		}
		
		/*增加border之后，在不修改width/height值的情况，元素的宽高也会发生改变，但是内容的宽高不改变。*/
		.box2{
			width: 100px;
			height: 100px;
			background-color: skyblue;
		}
		.box2{
			border: 10px black solid;
		}
		
		/*增加padding之后，width/height减掉padding的情况，元素的宽高不会发生改变，但是内容的宽高会改变。*/
		.box3{
			width: 100px;
			height: 100px;
			background-color: blue;
		}
		.box3{
			padding: 10px;
			width: 80px;
			height: 80px;
		}

		/*增加border之后，width/height减掉border的情况，元素的宽高不会发生改变，但是内容的宽高会改变。*/
		.box4{
			width: 100px;
			height: 100px;
			background-color: red;
		}
		.box4{
			border: 10px black solid;
			width: 80px;
			height: 80px;
		}
		
		/*增加padding之后，在添加box-sizing: border-box;的情况下，元素的宽高不会发生改变，但是内容的宽高会改变。*/
		.box5{
			width: 100px;
			height: 100px;
			background-color: yellow;
		}
		.box5{
			padding: 10px;
			box-sizing: border-box;
		}

		/*增加border之后，在添加box-sizing: border-box;的情况下，元素的宽高不会发生改变，但是内容的宽高会改变。*/
		.box6{
			width: 100px;
			height: 100px;
			background-color: green;
		}
		.box6{
			border: 10px black solid;
			box-sizing: border-box;
		}

	</style>
</head>
<body>
	<div class="box1">I am box1</div>
	<div class="box2">I am box2</div>
	<div class="box3">I am box3</div>
	<div class="box4">I am box4</div>
	<div class="box5">I am box5</div>
	<div class="box6">I am box6</div>
</body>
</html>

¶清除默认边距

在企业开发中为了更好控制盒子的宽高和计算盒子的宽高等等，一般在编写代码时的第一件事就是清除盒子默认的内外边距。

由于元素种类较多，盒子的内外边距不尽相同，甚至有的元素默认没有内外边距。故清除默认边距的方法可以用通配符选择器来设置，格式如下：

*{
    margin: 0px;
    padding: 0px;
}

但是用通配符选择器会遍历页面所有的标签，导致性能不良好，故企业开发中一般使用以下清除默认边距的格式：

1	body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}

可从http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css中复制。