margin-
首先贴一些看的文章
图解：https://zhuanlan.zhihu.com/p/25892372
流动性解析：https://www.cnblogs.com/LiveWithIt/p/6024864.html#commentform
image.png
那么首先要理解一个块的流动受内部的横向流和外部的横向流的影响，这里以左右为例，上下同理。
- 当一个块没有宽度的时候，受内部横向流的作用（方向是双向的，向左流也向右流），它会流淌满整个空间，这说明内部的流动是双向的，这时候设置margin-left 负值，相当于在左侧开辟了一块空间，那么河水就会充满左侧多余出来的空间，但是你会看不到，它被左侧吞掉（也许就像进了源头）；当设置margin-right负值的时候，会向右侧延伸，也就是增加了宽度。
- 当一个块设置了宽度，那么内部的流就失去作用了，这时候起作用的是外部的横向流（流动是从左向右的，也就是文档流的方向），所以当设置margin-left负值的时候，将当前的流的阻隔线向左推进，所以块会向左移动，而设置margin-right负值的时候，也是向左移动，不过left的参考线是包含块的左侧，或者是连接块的右侧（有一种，向左使劲的感觉），而right的参考线是元素块自身的右border。
圣杯布局的实现和分析
<!DOCTYPE html>
<html>
<head>
<style>
body {
min-width: 500px;
}
div {
height: 300px;
}
.contain {
padding-left: 200px;
padding-right: 100px;
}
.float {
float: left;
}
.left {
width: 200px;
margin-left: -100%;
position: relative;
left: -200px;
background-color: blueviolet;
}
.center {
width: 100%;
background-color: aquamarine;
}
.right {
width: 100px;
margin-right: -100px;
background-color: chocolate;
}
</style>
<body>
<div class="contain">
<div class="center float">center</div>
<div class="left float">left</div>
<div class="right float">right</div>
</div>
</body>
</html>
这里的块left right都有宽度，当设置好宽度，和float左移的视觉是这样的
image.png
接着设置left块的margin-left负值，会发现根据设置的值而逐渐向左移动（图1），可以想象到，把块左边的阻隔线左移，块跟随阻隔线移动的过程，所以当设置margin-left: -100%的时候; 当前的元素向左侧流动（-100%是父级contain的宽度）,当左侧的空间大于元素自身的宽度，则向上流动，再继续向左，直到移动100%的宽度，造成了视觉上上移的效果（图2）：
1
2
这里再通过一个相对定位自身左移-200px; 实现左边块的布局；对于右边的块，当设置margin-right负值的时候；会发现，设置0-99px之间的负值，右边的块是不动的（图3），当设置等于-100px或者更大的负值，右边的块向左上移动到第一排的最右边，当数值再增加也是不会再向左移动了（图4）。所以我推测，margin-right负值流动的时候，因为right属性对应的是自身参考线，而自身的宽度已经确定，所以，在当前区域有空间的时候，并不因为设置了margin-right负值自身左移，但是当当前的空间不足自身宽度，则会顺应外部流向上移动，但是当设置更大的值的时候，又会因为自身的宽度而不会继续左移。不过要注意，虽然块本身没有左移，但是实际渲染的时候，逻辑上的左移是存在的，会影响到后面的元素跟着移动后的阻隔线左移（图5）
3
4
5
感觉理解的还是不太到位。😔
网友评论