写给设计师的前端小知识之（五）——似魔鬼的“布法”

        诶呀……真是好久不见啦，不更的理由……就是懒！！！其实这篇半年前就打好了一半草稿，然后就那么搁浅了。但是各位还是没有抛下我。

        好久不写都有些忘了，翻看了一下前面的，其实我觉得你们能看懂真是难为你们了，之后会慢慢改进的。本系列文章并不标准权威，只是分享了一下自己的经验，肯定有不少错误，也欢迎大家共同探讨（提问题麻烦委婉一点，我是爱面子的狮子座，:satisfied:）。但想传达的东西更多的是思考方式吧。找到适合自己的学习方法，不管什么新的东西都能按照自己的一套方式去诠释理解然后作为己用。

        

        话不多说，进入正题。还是那句话，对使用工具有疑问的，都可以看第一篇，里面有说原因。

        

        这集讲讲那些不规则排版是怎么实现的。

        先来看一个简单的例子：

        

        

        这样的布局是不是挺熟悉的，经常用到的是影集相册之类的内容吧，左右为翻页的按钮。当然，装的内容图文不限：

        按照以前的方法呢，可能你们会说，写个左中右三个div不就好了，但是如果遇见下面这种呢？

        我们在前面有用到的margin属性，其实它的属性值是可以为负数的，处理上面这种情况无非就是用大的div去包含两个小div，一个左浮（float:left）,一个右浮（float:right）,左浮的margin-left为负数，右浮div的margin-right为负数，两边慢慢调呗。

        这个方法我就不演示了，需要注意的是，当margin属性值为正数的时候，我们知道，他离参考元素最近的边数值为多少，距离则为多少。但当为负数时候，则需要考虑自身的宽高。可以试试哈。

        且不说这样的方法需要考虑使用margin，占用的看不到的区域可能会导致挤压别的元素，用起来也不是很高大上啊！

        so……今天会用到position这个属性去解决这个问题。 来看一下官方是怎么说的吧：

     

        其中fixed这个属性，经常用于浏览器那种固定的小元素，比如什么咨询电话广告啦、贴边小按钮啦、还有手机端h5那种固定导航啦……它的优先级是非常非常高的，所以一般不建议占面积比较大的元素使用这个属性，除非是觉得这个对用户来说比较重要。它是相对于浏览器的窗口进行定位的，所以一旦他的位置被固定了，浏览器是伸缩就会很明显的影响到它，。

        重点是在relative及absolute这两个属性。它们通常搭配使用，如果非要拆开用的话，就是一定要弄清楚参考对象。

        大家都知道普通码头栓小船的那个木桩吧，一旦拴上，小船就跑不了，活动范围跟绳子长度相关。如果把relative比作木桩，absolute就算是小船了，只不过这里的绳子不再是实物，也不再束缚“小船的活动范围”，只是看做他们的关系。无论absolute跑多远，怎么跑，它的坐标全需要以relative做参考。在div盒子上的关系是：

        这也就为什么说他俩通常搭配使用，就像父亲通常要管着儿子一样。relative   对他子元素里带absolute属性的都有绝对管制权，也是俗称的相对定位relative和绝对定位absolute。绝对定位的特点就是：它的位置只跟它父元素有关，爹在哪儿它在哪儿，其他的元素的位置对其无影响。

        接下来看看实际使用吧

        

        这里要注意啦，用position定位的时候，可以尽量保持元素之间的独立，此处的按钮和元素为同级，外部用一个div包住他们。如下图，中间部分为300*200，那整个影集ablum就设置为跟中间部分尺寸一样。为什么不考虑按钮的占位呢，看下接下来的文字吧（有点多，耐心看）：    

        position的两个属性relative 和absolute一定是父子或爷孙……关系搭配使用的，总之absolute要作为relative的“小辈”，中间可以隔n辈，但还是不要轻易去尝试挑战极限，层级越少越好掌控。

        前面我们有说到浏览器读码方式是从上到下，从左至右。但有的时候吧，读到带有某些属性的标签的时候，它会刹个车，倒回去确认一下，这个我感觉就像一个回溯的模式。absolute这个属性就是其中一个例子，当浏览器读到它，便会倒回去找找他爹（带relative属性的元素）在不在，有爹管的儿子，才会。so……使用这两个属性的时候要一定要注意控制在你想要控制的范围，如果你就单独使用absolute，爹不在的话，有可能位置就是相对于整个body画布。但如果有爹，却是个乱放的爹或者别人的爹，那这个画面，记几想象一下吧！反正是太美~这里也就说明了absolute是可以单独使用的，但relative基本不会单独使用。

        所以，我想要两个按钮相对中间（middle）部分做位置的调整，但是他们在同一级，无法使用定位。再者，具有absolute属性的元素，相当于进入了一个次元空间，不占当前盒子任何一层的位置，即便是两个按钮，也是可以重合而不会排挤到对方，除了他以上最近包含relative属性的元素，没有谁能管得了他，album相当于只装了middle，在物理位置上，album是相同的。所以这里加不加它的尺寸都无所谓了，加上还要去处理边距，会更麻烦。      

        那你就要问了，我为什么不直接把按钮放入middle，让middle变为两个按钮的父元素。Emmmm……其实也是可以的，在你的各种盒子数量不多和关系不太复杂的时候。看个人习惯吧，这里我们只用了比较简单的几个矩形作为示例，但在实际使用中，也许middle包含了整个一屏的内容，可能会有各种各样复杂的情况。所以独立出来没准能省掉一些麻烦。

        （ps:像ablum这样的隐形外包div，实际工作中使用还是比较多的，某些情况下，遇到一些布局上的问题，比如要对某个盒子添加位置属性又怕覆盖掉它其他不可共存的属性，便可以考虑使用这样的代理div。因为父元素在非特殊情况下是会带着子元素一起活动的）

        看看效果吧：

        

        大家可以发现，加了定位属性的元素，无论是relative，还是absolute，简单的单词left、right、top、bottom等就足够用来定位置了。并且它的值，从0px到 无穷大你们都可以看看效果。我上面的效果，两个按钮是没有好好按照图放的，你们帮忙纠正下，哈哈~

        然后试一试在这基础上如果叠加margin属性还管不管用吧？

        尽量多试，无论对错，都是进一步深入的理解；

END————————————————————————

        为什么要这么着重讲这个东西哈，总的来说，前端的静态页面，布局能用到的就是那么几个   属性：外边距、内边距、定位……就像设计师排版，总有些内容是有章法的，左对齐、右对齐、两端对齐、垂直水平居中……掌握了这些东西，在里里外外套来套去，对付基础的html图文排版已经足够了。