【HTML/CSS】总结web app项目实践经验

最近热火朝天地做了一个web app项目，虽然之前做过这种类似移动端的项目，

但是当时只是出于形势所迫才做的，所以移动端的水平基本还是处于入门阶段。

最近开始做移动端web相关的，在这个项目中自己还是学到不少东西，总结一些肤浅的实践经验，供初学都参考。

1. 带有文字段落和图标的div随文字段落内容的变化自动垂直居中对齐

我们在项目中经常会遇到这种情况：文字段落和图标混合在一起，文字的段落的内容是随后端吐给前端的数据自动变化的，

但是这时候却要保证图标和内容都垂直居中 对齐的，如下两张图所示，内容由两排变成三排时，蓝色表示一个按钮或者一张图片，

在红色区域文字的变化过程中，蓝色图标始终是垂直民在显示，源代码如下所示：

    
    
    


    

        

            tuanfe tuanfe  tuanfe tuanfe tuanfe tuanfefetuanfe tuanfe  tuanfe tuanfe tuanfe tuanfe 
        
            

        

2. 在web app开发中，在放置一些背景图片或者其他装饰小图片时，可以更多的用before或after伪类

个人觉得多使用before和after伪类，这样布局起来很轻松，首先代码质量比较高，后期也容易维护修改，自从用了这两个属性后，就舍不得离手了。

如图所示的这种情形，这里的打勾的图标我就是用的after伪类来实现的，源代码如下：

p-submission .delivery-address:after {
content: '';
position: absolute;
width: 20px;
height: 20px;
background-color: #ccc;
top: 0;
bottom: 0;
right: 10px;
margin: auto;
background: url(/static/order/submission/img/pay_41ab3f5.png) no-repeat right center;
background-size: 20px 20px;

3. 用弹性布局实现垂直居中对齐

我想这种情况，在项目中常见了，在web app中可以试试弹性布局这个新技术玩玩，如图所示，源代码也如下。

    
    
    



    
one
    
two
    
three