如何实现三分布局
先来个简单一些的，比如说，左右固定中间自适应的：
实现这个布局的方法有很多，比如，一个父级div的paddingleft和right就是这两个float的div的大小，通过float浮动来实现。
再比如，通过flex布局，主轴横向，然后左右两个div宽度固定，中间的div设置flex:1即可。
可是，实战中我们通常遇到的是这样的布局：
上下各有一条固定，然后中间左侧固定，右边自适应。
你会发现，这些东西都来源于真实的项目框架。考察就是你如何实现这样的布局。
最好的方法就是通过flex布局实现，这里稍微绕个弯，你需要嵌套一下flex，外层是垂直主轴，内层是横向的主轴。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html,body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#box {
width: 100%;
height: 100%;
background: lightblue;
display: flex;
flex-direction: column ;
}
.top {
width: 100%;
background: red;
height: 30px;
}
.main {
width: 100%;
display: flex;
background: blueviolet;
flex: 1;
}
.left {
width: 100px;
height: 100%;
background: green;
}
.right {
flex: 1;
background: yellow;
height: 100%;
}
.bottom {
height: 30px;
background: black;
}
</style>
</head>
<body>
<div id="box">
<div class="top"></div>
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</div>
</body>
</html>
css过渡动画如何实现
过渡的写法是transition，例子：
transition:all 0.5s linear 1s;
这个东西需要配合hove等伪类去执行。比如说，你再一个div上鼠标悬停以后，当变化成hover中的样式时，就会通过transition去执行。
如何实现垂直居中
实现垂直居，常见的有四种方法：
1.通过inline-block居中，这种方法需要把你两个按着的元素都转化为行内块元素。注意这个时候，你的行高对元素是有影响的。
display: inline-block;
vertical-align: middle;
2.通过flex布局居中。
3.通过table-call的方式居中。
4.通过absolute绝对定位去居中，这个方法非常不推荐，因为他不适合去做一些自适应的布局。当你的字体随着媒体大小变化的时候，这个布局有可能被破坏。
你如何解决移动端页面自动缩放
在页面中使用rem布局就可以解决问题。
这里我使用的是淘宝lib-flexible 解决方案：
需要你在页面中注入一段js
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
它有一个换算公式，就是比如说，给你的是750的设计图还是640的设计图。
例如你的设计图宽度是640px的，然后你的logo是130px的
那么rem 就是 130/64 =2.03rem。基准就是 设计图宽度 除以 10
如何实现媒体查询
为什么需要媒体查询？让我们rem也不好解决问题的时候。
比如说，在iphone4和5上面，有一些文件太长了，就算你使用rem也放不下。
这个时候，你可能需要给不同的机型做一个区别的对待。
媒体查询主要是通过@media完成的。
请看例子:
/*iphone5*/
@media only screen and (max-height: 460px) and (max-width: 320px){
.inv-phone-btn2 {
bottom: 20%;
}
}
/*iphone6 iphone7*/
@media only screen and (min-height: 559px) and (min-width: 375px) {
.inv-phone-btn2 {
bottom: 20%;
}
}
/*三星s6 note5*/
@media only screen and (min-height: 604px) and (min-width:412px){
.inv-phone-btn2 {
bottom: 20.5%;
}
}
/*小米 */
@media only screen and (max-height: 514px) and (max-width:360px){
.inv-phone-btn2 {
bottom: 19.5%;
}
}
/*联想 */
@media only screen and (max-height: 512px) and (max-width:360px){
.inv-phone-btn2 {
bottom: 19.5%;
}
}
/*华为 */
@media only screen and (min-height: 568px) and (max-height: 650px) and (max-width:360px){
.inv-phone-btn2 {
bottom: 22%;
}
}
/*ipad*/
@media only screen and (min-width: 768px) and (min-height: 960px){
.inv-phone-btn2 {
bottom: 18.5%;
}
}
你可以发现，就是在@media only screen and后面限制了一些条件做出来的。然后通过里面的样式去覆盖原来的样式，就这么简单。
