图1 盒模型
CSS中的盒子模型，我们都知道其组成结构。但是，在使用它时总觉得难以驾驭。
X轴方向：
定律：
1）width指的是盒子中内容的宽度，而不是盒子的宽度。
2）在普通流（ normal flow ）中，块级元素盒子的宽度一定等于该盒子的父容器的width。
3）X轴方向的属性：margin-left, border-left, padding-left, width, padding-right, border-right, margin-right。
其中只有margin-left,margin-right,width可以设置为auto。
X轴方向使用auto：
1）设置三个属性中的一个为auto:
由定律2）可知，子容器的盒子宽度一定等于该盒子的父容器的width。基于这条理论，如果我们设置X轴方向上的某一属性（margin-left,margin-right,width）为auto，浏览器会计算出一个数字value来替换auto，以使得子容器的盒子宽度等于父容器的width。
eg.1
<div style="width:500px; background:#999;">
<p style="width:200px; margin-right:200px; margin-left:auto;">
This are some words...
</p>
</div>
re.1
div.width = p.width + p.margin-right + p.margin-left => p.margin-left = div.width - (p.width + p.margin-right ) = 500 - (200 + 200) = 100px
eg.2
<div style="width:500px; background:#999;">
<p style="width:100px; margin-right:200px; margin-left:100px;">
This are some words...
</p>
</div>
re.2
这个例子中，p的盒子宽度小于div的width。此时，浏览器会将margin-right:200px替换成margin-right:auto;
注：这只是针对left-to-right的语言，如中文、英文，对于right-to-left的语言，此行为相反。即设置为margin-left:auto;
2)同时设置三个属性中的两个为auto:
除了定律2）要满足外，这两个设为auto的属性将平分剩余宽度（剩余宽度指的是：要使定律2）成立，还需要加上多少宽度）
eg.3
<style type="text/css">
.content{
width:960px;
margin:0 auto;
}
</style>
<body>
<div class="content">
<div class="header">
</div>
<div class="leftCol">
</div>
<div class="rightCol">
</div>
<div class="footer">
</div>
</div>
</body>
re.3
这个例子就是我们平时要做一个宽度为960像素且水平居中的典型例子，为了使得水平居中，我们设置margin-left,margin-right为auto，浏览器会自动为margin-left,margin-right的值设置为：(浏览器窗口宽度 - div.content.width)/2
margin-left或者margin-right使用负值：
规律：一定要满足定律2）
eg.4
div {width: 400px; border: 3px solid black;}
p.wide {margin-left: 10px; width: auto; margin-right: -50px; }
<div>
<p class="wide">
this is a demo
</p>
</div>
re.4
p.wide.width = div.width - (p.wide.margin-left + margin-right) = 400 - (10 + (-50)) = 440px
Y轴方向：
1）与X轴方向的属性一样，只有margin-top，margin-bottom和height可以指定为auto。
2）不同的是，当我们在普通流中设置margin-top和margin-bottom为auto时，浏览器不予理会，而是自动把它设置为0 （注意，此规则不适于positioned元素）。这使得要上下居中变得困难。
3）margin折叠：就大原则。
浙公网安备 33010602011771号