7.2.1.2. Using auto – auto的使用
假如我们将width, margin-left或 margin-right中的其中两个给定具体值，而将剩下的一个设置为auto的话，那么被设置为为auto的属性将根据该元素的父级计算具体的值。比如一个P元素所在的父级宽度为400px，我们对P标签设置如下CSS规则：
p {
margin-left: auto;
margin-right: 100px;
width: 100px;
}
那么最终计算margin-left得到的结果是200px。还是以上面的例子为基础，假如三个属性都设置为100px的话会怎么样呢？结果是margin-right将被强迫修改为auto：
当然这是针对自左到右的标准流，如果标准流是自右到左的话，那么被逼迫的对象就是margin-left了。
如果指定了两个margin而将width设置为auto的话，那么width将占据出去两个margin之外父元素其余的宽度：
p {
margin-left: 100px;
margin-right: 100px;
width: auto;
}
这与省略width声明的效果是一样的：
p {
margin-left: 100px;
margin-right: 100px;} /* same as before */
7.2.1.3. More than one auto – 多个auto
现在我们来看看假如width, margin-left和 margin-right这三个属性中有两个被设置为auto的情况。假如指定width而将margin-left和 margin-right设置为auto的话，那么这两个值为auto的属性将平分父元素出去width剩余的宽度，也就相当于将元素居中了：
p {
width: 100px;
margin-left: auto;
margin-right: auto;
}
再看看下面的例子：
p {
margin-left: auto;
margin-right: 100px;
width: auto;
}
这个时候margin-left将被判别为零。那么如果将这三个属性全都设置为auto呢？答案很简单，两个margin将被设置为零，width值就等于父元素的内容宽度。
7.2.1.4. Negative margins – 负值边界
在CSS中我们可以把边界设定为负值，并且会得到一些有趣的效果，尽管在CSS规范中没有要求浏览器必须支持负值边界。先来看个例子：
div {
width: 400px;
border: 3px solid black;
}
p.wide {
margin-left: 10px;
width: auto;
margin-right: -50px;
}
可以看到子元素的宽度超出了父元素的范围，而这也是正确的解析结果：
10px + 0 + 0 + 440px + 0 + 0 – 50px = 400px
为了让子元素的综合宽度等于父元素内容宽度，定义为auto的width最后的计算结果是440px。我们再来看个例子：
div {
width: 400px;
border: 3px solid black;
}
p.wide {
margin-left: -50px;
width: auto;
margin-right: 10px;
border: 3px solid gray;
}
可以看到负值边界不仅能让一个元素突破其父元素，甚至能突破浏览器边界。