CSS3 新特性样式设置

此处用于记录在项目中常用的CSS3特性。

1，div宽高设置随可见窗口

以前设置这个高度一般用计算 document.body.clientHeight, document.body.clientWidth 来获取可见区域屏幕宽高。
CSS3中有几个属性就可以直接设置，
a). vh --> viewpoint height (窗口可见高度)，1vh = 1%窗口可见高度，所以窗口可视区域总高度就可设置成：
div{
height: 100vh
}
vw --> viewpoint width (窗口可见高度)， 1vw = 1%窗口可见高度，所以设置div宽度和可是区域一致则可以如下设置：
div{
width: 100vw;
}
b). 用CSS3的计算属性来设置，CSS3中提供了新的计算方法，可以通过计算方法来动态设置div的宽高，示例如下：
div{
height: calc(100%);
width: calc(100%);
}

2, div布局定位用弹性盒，

div{
display: flex;
}
有什么好处呢，就是更容易排列div中的元素位置，以前排列div中元素，一般用定位来排列，如下：
div{
position: absolute;
top: 5px;
right: 16px;
}
这种排列方式可以实现布局，但是有局限性就是当div的宽高不固定的时候，就会出问题，比如div高度是20px, 元素高度是8个像素，则设置top: 5px，差不多刚好垂直居中了，但是如果div高度发生变化，变为30px的时候，元素就不垂直居中了，这个时候，使用CSS3的弹性盒就能很好的解决这个问题，如下：
div{
display: flex;
// 垂直居中
align-item: center;
// 水平居中
justify-content: center;
}
具体align-item和justify-content对应的值可以参考CSS用户手册。
note: 通常情况下弹性盒只有一行，弹性盒内的子元素默认在同一行排列展示。

3，div宽高设置用box-sizing 属性防止宽高溢出

在写项目页面时，有时候会在子元素中设置
div{
height: 100%;
width: 100%;
}
来使子元素宽高充满父元素，但是如果在子元素中设置padding或者border时，会发现宽高会有溢出，如：
input{
height: 100%;
width: 100%;
line-height: 21px;
border: 1px solid #333;
padding: 0 8px;
}
这个时候输入框宽度其实会溢出父元素的宽度，因为有padding, 默认设置height和width是不计算边框和padding在内的。这就可能导致挤占其他元素的位置，设置box-sizing：border-box就很好的解决了此问题。
box-sizing 属性定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距(padding)和边框等.

4, 设置阴影效果

有些需要阴影特效的地方，如input框focus时的高亮边框，可以用box-shadow来设置，
box-shadow支持5个属性设置：
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow: 水平位置的阴影，可为负， 正数往左偏移，负数往右偏移
v-shadow: 垂直位置的阴影，可为负，正数往上，负数往下
blur: 模糊距离
spread: 阴影大小
color: 阴影颜色
inset: 可选，把往外渲染的阴影改为往内渲染。
input:focus{
box-shadow: 0px 0px 2px 2px rgb(79,161,222);
}
渲染效果如下：

5，设置动画效果

用transition属性设置样式切换的动画效果, 如颜色渐变，高度渐变等。
div{
background: white;
transition: .2s;
}
div:hover{
background: blue;
}