margin负值布局

             今天是本人刚上任的第一个星期，说起来还是特别的激动的，我的茫茫前段路，于今天是一个大起点！！哈哈哈！！请原谅本人的无知！。。。。

作为一个前端的小触，刚刚踏入前端的大海，必定会遇到很多的大坑，所以为了让我自己能够更踏实，更有效的学习，本人毅然决然的开始写自己的小文章，希望能够鼓励自己一直学下去，并且若能够对那些和我一样的小触有所帮助的话，那真是太好了，心里也会莫名的开心。。满满的成就感。。。

预期两天的短暂的工作就然我收获到了两个我觉得比较好用的布局方法，虽然多多少少在网上如大海搬的学习资料中都有提及到，但是我自己亲自去试用还真是没有过自己的亲历亲为的总结，所以今天就来说说把！希望各位看官多多指教哈！！！！

　　　１.margin负值的左右顶格布局：　

         

                 　

　　　　　如图中所示的布局可以说在大多数的网站都是屡见不鲜的，可是作为一个小触的我来说，第一次拿到这样的布局是让我纠结一会，我们要实现的效果是如上图的布局样式，并且要是后台插入新的数据会自动实现图示的布局，两段对齐！！！

　　　　　那么假如用最简单的ｆｌｏａｔ布局，把所有的子元素都加ｍａｒｇｉｎ，那么无论是给ｌｅｆｔ还是ｒｉｇｈｔ加ｍａｒｇｉｎ值都是会有一种情况就是总有一边是不顶格的，就用前者的情况来说，第一个元素左边就会有间隙，于是我就向在第一个子元素上特别的加一个ｍａｒｇｉｎ－ｌｅｆｔ＝０就好了，是的要遇到的是固定数据的静态页面的弧啊是可以解决问题，但是要是遇到的是需要套数据的情况就不一样，第四个子元素，也就是后一行的第一个子元素，还是会出现一样的问题，这就着实让我头疼。

　　　　　后来又想着，大不了写一个ｊｓ脚本。去控制每一行的第一个元素，这样就可以实现插入数据的自适应，但是会头想想代码也过于麻烦。斟酌之中，我又想到了ｆｌｅｘ盒子的ｊｕｓｔｉｆｙ的属性是可以实现两端对齐的布局，在父元素上加ｊｕｓｔｉｆｙ＝ｓｐａｃｅ－ｂｅｔｗｅｅｎ，子元素加上flex：１的方法。但是。。。。

　　　　　头疼的是后台动态的插入数据，插入的子元素都是ｆｌｅｘ：１，所以多有的子元素都会挤在同一行并且越来越窄，这并不能达到我的预期效果，果断又要另谋生路。

　　　　最后我还是摸索到了，之前在课上听到的ｍａｒｇｉｎ负值的方法，因为ｍａｒｇｉｎ是会改变元素的宽度的，所以我们需要再父元素和子元素中间再机上一个ｄｉｖ，让它来调整ｍａｒｇｉｎ的负值，

             

这种的布局方法可以很好的适应两段的对齐，而且通过后台插入的数据也能适应良好，但是有一点左右两的元素会比中间的元素宽度窄，因为我们把ｍｏｔｈｅｒ左右深出的部分都给ｏｖｅｒｆｌｏｗ了，

我们在使用的时候只需要量取设计稿的上元素宽度还有间距就好了。把子元素的宽度加上２＊ｍａｒｇｉｎ（左右的）的值乘以元素的个数，再减去父元素的宽度所得得值最后除以２就是中间ｍｏｔｈｅｒ的左右ｍａｒｇｉｎ偏移值。

            其实有更加精确的计算方法保证三个子元素的真实宽度都是相等的，假如如图一样我们是要放置3个子元素，那么我想让每个div的宽度为380，当然不能超过400px。。。因为最外的父元素的宽度才1200px,380*3=1140，于是就多出60px ，一个div有左右两边的margin一对，三个子元素，中间就有3-1=2个margin对组成的间隙。60/2=30就是margin的值，最后再mother这个中间层的左右margin分别设置-15px就大功告成了，检验一下。！！！380*3+60=1200，刚好为父元素father的1200值，而中间层mother的宽度为380*3+30*3=1230.。

             子元素个数：n;

              两段无缝并排显示中间产生的间隙：n-1个；

              左右margin的和为：（最外层元素总宽-n*子元素宽度）/（n-1）；

              mother中间应该设置的margin负值为：（最外层元素总宽-n*子元素宽度）/（n-1）/2

          我们在此检验一下一行有4个子元素的情况。每一个子元素不超过300，假如我的设计稿是280px,那么1200-280*4=80px, 中间有4-1个间隙，左右margin的和就为80/3=26.6我们用近似值26,那么mother的负值偏移量就为13px；我们把数据敲进代码做检查，结果如下：

可以看到布局很成功，除了除不尽的一点误差，基本达到了布局要求！，并且无论插入多少的子元素都能自适应！这就很好的达到了我们的要求！！！！案例很成功！！