烘焙圈总结

• 这个项目首次尝试使用flex-box来进行布局，一开始的确是有些迷茫不知道怎么用，可是上手之后发现真的很方便！不过有点效果还是需要float来实现，弄清楚什么地方适用就好

//若要对display:box的元素内的子元素进行垂直居中等处理，其内子元素必须都是display:block才能显示出应有的对齐效果

• 这个项目还有两个第一次，一个是使用了LESS，另一个是在写之前先由设计图总结出一些公用部分，先抽出来单独写在一个LESS，在协同合作写页面时，把common.less引入自己的custom.less里，只要在html中连接编译出来的custom.css就可以使用两个文件里定义的东西，避免了之前那样因为是合作编写而要引入多个css的情况，然后某些公共类在html中像前端框架那样直接引用类名就可以了，这样比较直观，而且一旦需要修改只要同意修改公共类的样式就可以了。

• 图片延时加载使用lazyload来实现，由于想在图片没有加载的时候依然占位，使得网页的框架不会变形，使用背景图片来显示客户图片，里面用一张指定比例的透明图片来撑开位置

//按此结构来写，就能快捷得到想要的结果
<div class="ub-f1 index-block clickable">
     <div class="lazy" data-original="images/img1.png">
          <img src="images/o2.png" class="oimg">
    </div>
    <p class="cl-f-grey">健康蛋黄酥饼干</p>
</div>
//css
.lazy{
    background-image: url(../images/grey.gif);
    background-size: cover;
    background-position: center; 
}
.oimg{
    width: 100%;
}

• 在测试时发现当img底部会跟其他元素有3px左右的间距，这是之前一直忽略了的，可以使用以下方法解决：

img{
    vertical-align:top;
}