写页面常用的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/[e-mail]') no-repeat -49px -9px;        }      }      .uploadImageIcon{        width:25px;        height:25px;        background:url('../assets/images/[e-mail]') 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背景变红且文字消失。&之后的样式触发会让其内的样式也触发。