项目经验1

  在一开始学前端的时候，都是从模仿别人的网站开始做起。基本上写的都是纯前端界面，也就是没有和后台进行交互的界面。虽然现在已经能够熟练的写需求里面各种奇奇怪怪的html文档结构，JS、jquery动态元素也能写的不错（当然了还是需要继续学习的），但是到最近真正开始接触大项目，前端后台分工合作的时候才发现一个很重要的问题。

  我发现自己之前在写纯前端界面的时候有一个非常不好的习惯，就是特别爱用position定位（relative、absolute），relative在项目里面还是经常可以用到的，主要用法就是使某个盒子在整个window界面或者是父盒子中居中。但是absolute就很致命了，尤其是像下面这种用法：

    div{

        position:absolute;

        top:100px;

        left:100px;

    }

  然后通过浏览器本身的调试工具（快捷键F12），在“查看器”（我一般用的是火狐浏览器）窗口旁边的“规则”去修改top、left值（little tips：单击top等定位属性后面的像素值然后按↑就可以调整到自己想要的位置）

这种做法虽然可以在初级阶段的时候非常容易的得到自己想要的位置，让界面看起来和原界面没有什么区别，但是一到需要和后台交互的时候，造成的麻烦就非常大了。

  这两天改项目下来，发现后台有一个经常的需求就是：对于界面中代码差不多的盒子（就是前端直接通过复制粘贴代码写出来的盒子），只需要用for循环来循环第一个盒子。但是如果使用position来具体定位的话，那么这个需求就没办法实现。因为如果每个盒子都有自己特定的定位，循环起来的话必然就只有重叠的后果。这也是我终于明白为什么那么多大公司的网站界面里面能够看到的position非常少这一现象。

  解决这个问题的办法就是：弃position用float（主要就是用float，position视里面的情况而定要不要用），如果为了美观需要每一个盒子之间有一定间隔的话，最多就加上margin-left或者是padding-left之类的，当然了如果有多行的话不要忘记再加一个margin-bottm或者padding-bottom

  然后目前为止我碰到的这种要求用for循环循环第一个盒子的情况分为两种：

    1.横向

    2.纵向

  不管是横向还是纵向的排版，都不要方，关键点就在于在外面套一个大的父盒子来限制它的宽度，float是必须要写的，当你定义你的父盒子宽度之后，里面的盒子发现外面盒子的宽度不够的时候自然就会向下排版了，这样就达到了纵向的效果