一些常用css技巧的为什么（一）我所理解的margin

要用到的基本术语和概念：

正常流：HTML文档的文本布局，在非西方语言中流的方向可能不同。大多数元素都在正常流中，浮动或定位可以让元素脱离正常流。

块级元素：像p，div之类的元素在正常流中会在其框之前和之后生成“换行”，所以处于正常流中块级元素会垂直摆放。

行内元素：strong，span之类的元素，这些元素不会在之前或之后生成“行分隔符”，它们是块级元素的后代。

水平格式化的7大属性：margin-left，border-left，padding-left，width，padding-right，border-right，margin-right。

只有width，左右外边距可以设置为auto，其余属性必须为特定值或默认值或0

width必须设置为auto或某种类型的非负值，padding，border不能设置为负值；但margin可以设置为负值，并且设置为负值后，元素内容框的左或右边界位置会移动并且内容框宽度增大，如下图





需要知道的画外音：

chrome下width默认为auto；border，padding，mar gin默认为0；所以以下所讲的auto除了width，margin的需要显式设置。

正常流中块级元素框的水平部分总和（width+pdding+border+margin）等于父元素的width

如果设置width，margin-left，margin-right中某个值为auto，而余下两个属性指定为特定值，那么设置为auto的属性UA会确定所需长度从而使元素框的宽度等于父元素的width。

如果设置width，margin-left，margin-right都为非auto的某个值，此时总会把margin-right强制为auto。

当不设置行内非替换元素如span的宽高时，即使它里面有文本内容，不管是在开发者工具看盒模型宽高还是用js获取宽高都为auto。而块级非替换元素不设置宽高里面有文本内容就可以获取具体像素宽高值。

margin： 0 auto 为啥可以居中 因为他的父元素的width始终等于子元素所有之和这个做限制着，而行级元素0 auto就不行因为一行中不止span一个没有父元素宽度限制

注意块级元素设margin:30px,其实相当于30 auto 30 30 因为要保证父元素的内容充斥着子元素所有之和。除非将块级元素设置为行内块级元素，这才可以30 30 30 30

当将元素margin-top,left设置为负数后是content在向上,左移动，margin-top，left的位置并不动

圣杯布局：设置为浮动是必要的，因为要margin为负转到前一个后面。right是跟着left移动的，但是right只移动left的width（+border+padding）这么宽，此时恰好left的margin-left和margin-right相逢，如果再继续左移的话，margin-right继续向左移超越maring-left的那条线位置。

当left拉回来了，但会覆盖middle内容的左端，要把middle内容拉出来，方法（1）所以在外围container加上 padding:0 220px 0 200px

方法二（2）或给middle添加box-sizing:border-box 设padding-left:220px这样也可以将内容拉过来。但是这样会使middle在底层，left和right在其上方 和双飞翼的效果类似（若设双飞翼的子元素的padding）

同理right

注意设置为relative是有原因的，若设成absolute，因为浮动和决定定位不能同时用，同时用会优先绝对定位。因为margin-left=100%作用下，看不见left了

参考：http://www.cnblogs.com/imwtr/p/4441741.html
https://segmentfault.com/q/1010000002709305 http://www.cnblogs.com/lyzg/p/5160570.html