css小技巧

最近开始写小程序
然后又开始写vue
真的是一个头两个大

然后慢慢记录平时的一些前端技巧
不定时更新

让子元素在父控件里面居中
在父控件里面设置这两个熟悉

text-align: center;
margin: 0 auto;

当然 display:flex也是不能少的

设置图片的正确姿势

.icon-add-passenger {
  display: inline-block;
  width: 22px;
  height: 22px;
  background-image: url(../common/images/ic_add_passenger.png);
  background-size: 100%;
  margin-right: 5px;
}

css动态绑定

• 用全局变量控制

HTML代码：
Demo2

Javascript代码：
data: {
  classA: 'class-a'  //当classA改变时将更新class
}

渲染后的HTML:
Demo2

• 通过对象控制

Demo4

Javascript代码：
data: {
  isA: false,  //当isA改变时，将更新class
  isB: true    //当isB改变时，将更新class
}

渲染后的HTML:
Demo4

• 三木运算控制

HTML代码：
Demo3

Javascript代码：
data: {
  classA: true
}

渲染后的HTML:
Demo3

• json控制

HTML代码：
Demo3

Javascript代码：
data: {
  classA: {
          colorA:true,
          colorB:false
        }
}

渲染后的HTML:
Demo3

这种使用的比较多
多种样式控制比较方便

其实style也可以动态控制

HTML代码：
Demo3

Javascript代码：
data: {
          classA:{
                color:red
          },
          classB:{
                backgroundColr:blue
          }
}

渲染后的HTML:
Demo3
这样div就有classA和classB的复合属性
注意点：复合样式   一定要采用驼峰命名方式  不能按照原css写法 
style和class用法类似

这种使用的比较多
多种样式控制比较方便

最近要开始用weex做项目了
距离上一次用weex是两年前
现在weex都开源道Apache作为顶级项目了
再过一遍文档发现布局方面写的还可以
放个链接
http://weex.apache.org/cn/wiki/common-styles.html

Untitled.jpg