css小技巧

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

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

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

text-align: center;
margin: 0 auto;

当然 display:flex也是不能少的

设置图片的正确姿势

<p><span class="icon-add-passenger"></span></p>


.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代码：
<div :class="classA">Demo2</div>

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

渲染后的HTML:
<div class="class-a">Demo2</div>

通过对象控制

<div :class="{ 'class-a': isA, 'class-b': isB}">Demo4</div>

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

渲染后的HTML:
<div class="class-b">Demo4</div>

三木运算控制



HTML代码：
<div :class="classA ? 'class-a' : 'class-b' ">Demo3</div>

Javascript代码：
data: {
  classA: true
}

渲染后的HTML:
<div class="class-a">Demo3</div>

json控制



HTML代码：
<div :class="classA ">Demo3</div>

Javascript代码：
data: {
  classA: {
          colorA:true,
          colorB:false
        }
}
<style>
.colorA{
      color:red
}
.colorB{
     back-groundcolor:blue
}
</style>
渲染后的HTML:
<div class="colorA">Demo3</div>

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

其实style也可以动态控制



HTML代码：
<div :style="[classA,classB] ">Demo3</div>

Javascript代码：
data: {
          classA:{
                color:red
          },
          classB:{
                backgroundColr:blue
          }
}
<style>
</style>
渲染后的HTML:
<div style="classA,classB">Demo3</div>
这样div就有classA和classB的复合属性
注意点：复合样式   一定要采用驼峰命名方式  不能按照原css写法 
style和class用法类似

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

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

Untitled.jpg

css小技巧

推荐阅读更多精彩内容