写页面常用的css特性：calc() vh vw ch和ex

1. vh与vw
   vw指Viewport宽度， 1vw 等于viewport宽度的1%，整个viewport宽度100vw.
   vh Viewport高度， 1vh 等于viewport高的的1%,整个viewport高度100vh.
   vw和vh会随着viewport变化自动变化.学到了就应该经常用在页面设计中。
   2.calc()
   在css中，可以进行运算的方法，比如：
   width: calc(100% - 80px);
   里面写计算式，支持简单加减乘除，注意减号前后空格，没有可能会出错。
   特别注意：calc()要写在行内，也就是写在内置css里面；
   例子：

html:
<div class='mydiv' style='height:calc(100vh - 40px)'></div>
css:
.mydiv{
 width=100%;
}

上述例子的div铺满视图，但高度比视图高度小40排序，改变屏幕大小，div高度宽度会自适应。

补充：其实calc()也可以写在外部样式文件less中，写法需要做一种escape的操作，在less里面写成 calc(~’100% - 10px’) 这样的形式，多了引号和一个波浪符号。具体参见：
Calculating width from percent to pixel then minus by pixel in LESS CSS
3.
ch 字符0的宽度
ex 小写字符x的高度

总结：虽然是小知识，而且技术蛮早就有了，但是不注意学习这些新知识，是会吃苦的。

1. less的小技巧 如何hover父元素，改变子元素样式

.uploadblock{
      width:100%;
      height:100%;
      background:#f2f2f2;
      padding-top:10px;
      &:hover{
        background:#d4e7fd;
        .uploadImageIcon{
          background:url('../assets/images/fabric-icon3@1x.png') no-repeat -49px -9px;
        }
      }
      .uploadImageIcon{
        width:25px;
        height:25px;
        background:url('../assets/images/fabric-icon3@1x.png') no-repeat -9px -9px;
        margin:0 auto;
      }
 }

<div class='uploadblock'>
        <div class='uploadImageIcon'></div>
        <p>text here</p> 
</div>

补充：这个方法还可以拓展，&之后还可以直接写class， 达到非常厉害的效果：

<div class="div1" ng-class={divChange:ifChange}>
  <p class='p1'>我会被隐藏</p>
</div>

css

.div1{
width:200px;
  &.divChange{
   background-color:red;
   .p1{
     display:none;
   }
  }
}

以上代码的效果是，当js控制ifChange为true时，会给div添加一个divChange的class,同时会让p1样式改变，即div背景变红且文字消失。&之后的样式触发会让其内的样式也触发。