其实在前端的布局过程中经常会碰到同一个样式可以有很多种实现方法的。
在初期的时候也非常纠结于跟着视频教程里面的来写，后来发现也不一定。
但是在写了几个小的静态网页，经过自己总结之后得到以下几个小tip：
1、尽量简洁网页成分构造
例如有时候只需要一张图片，但是要对图片进行定位的时候很多人会选择在div当中添加dmg，代码如下：
<div class="index"><img src="images/index.png" alt=""></div>
但是我会选择只使用一个div在css中选择通过url（）函数来达到我想要的效果，代码如下：
Html：
<div class="img"></div>
Css:
.img{background: url(../images/index.png) no-repeat;background-position: center center;-webkit-background-size: cover;background-size: cover;
}
这样带来的直接好处是类名或者标签名深度变浅，数量减少，减小html构造的复杂程度，不容易写到后面越来越混乱。另外一个好处是通过这样的方式写html可以不用js的情况下通过css来实现背景图片的改变。还有一个好处是它单纯是一个div的块标签，在使用浮动inline-block的时候会比较少碰到基准线混乱，要频繁使用vertical-align的情况。
2、在网页当中尽量少使用float，否则容易导致网页不稳
网站使用浮动的情况对自适应的限制比较大，网站设计师没有办法保证用户的浏览器是在什么设备上运行的，也没办法保证是在多大的屏幕上运行的，因此可以想像，如果频繁使用float参数，网页当中含有很多的浮动，当遇到分辨率相对较小的屏幕时就会遇到各种标签被排挤，从而导致原有排版全部被打乱的情况，甚至严重影响网站的原有功能。
3、当遇到问题急于找不到问题原理层面上的错误原因的时候，先放一放，找到别的解决方案。
在写网站的时候，大部分时候尤其是上班的朋友肯定会有deadline，中间在写代码的过程中会碰到很多奇奇怪怪的bug。而在debug的过程当中往往非常费时间，有时候由于自己一个角度钻死以后找不到解决方案会浪费大量的时间，从而导致任务无法按时完成。如果在尝试debug以后没有找到方案可以先把这个案例mark下来，用别的方案先去解决这个问题，然后回头再解决这个问题。例如：有时候在li标签当中碰到排版问题可以选择先不用li，用a或者div或者其他标签解决问题，或者采用不同的排版方案，而不是一味debug下去。
4、无论是什么网站始终有版心的存在，在切割排版之前可以先把版心的结构搭好，方便后面的构造。