从块级元素（Block-Level Elements）说开去-CSDN博客

　　　　　　　　　　　　　　图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折叠：就大原则。

转载于:https://www.cnblogs.com/ifshe/archive/2011/08/17/2143302.html