心态转变
在之前的面试中，自己总是过多的去强调业务实现，一直强调自己能完成各种页面，一直把自己当成一个切图小妹，美工，js实现。可如今直说业务实现就显得自己太LOW，现在前端工程化、模块化、组件化及开发模式等。但说到底前端还是更多的业务页面实现，以及用户体验。
常被问到的知识点
html相关问题
html 不会问太多的问题
1. 项目中有没有用h5，常用的h5标签有哪些？
媒体标签。有视频标签（video），音频标签（audio）结合外部资源（object）使用
各种语义化标签。有导航标签（nav），章节标签（section），header/footer等
2. 块级元素和行内元素有哪些，有啥区别？
- 块级标签有：p、div、dl、dt、ul、li、h1、h2...
- 行内元素有：a、span、i、b、strong、button、input...
- 块级元素独占一行，行内元素与相邻元素同一行
- 块级元素宽高、边距等可控制，而行内元素不可控
css相关问题
1. 什么是flex布局，flex布局怎么用？
flex是弹性布局，也就是为盒装模型提供最大的灵活性
容器属性：
flex-deriction:row | row-reverse | column | column-revers //主轴的排列方向
flex-wrap:wrap| no-wrap|wrap-reverse //主轴一行排不下如何处理
flex-flow:flex-deriction || flex-wrap //默认值为row nowrap
justify-content:center | flex-start | flex-end | space-between | space-around //主轴上的对齐方式
align-items:center | flex-start | flex-end | baseline | strech //定义内部项目对齐方式
align-content:center|flex-start|flex-end|space-between|space-around|stretch //多个轴线时候的对齐方式，只有一根轴线则不起作用
项目属性：
order:<integer> //order定义项目的排列顺序，数值越小排列越靠前，默认为0
flex-grow:<number> //定义项目放大属性，默认为0，即若存在空余空间也不放大。若几个项目都为1，则等分，若有2，2的占两份
flex-shrink:<number> //定义项目缩小属性，默认为1，即若空间不足，改项目则缩小。
若几个项目都为1，不足时等比缩小。若值为0，则不缩小
flex-basis:<length>|auto //默认值为auto,即项目本来的大小。
flex:none|[<'flex-grow'> <'flex-shrink'>? || <'flex-basis'>] //默认值为0 1 auto
flex:auto //即为0 1 auto
flex:none //即为0 0 auto
align-self:auto | center | flex-start | flex-end | baseline | strech //默认auto,表示继承父元素的align-items,
若没有父元素，则等同于strech。若每个项目不同的值则覆盖父元素的align-items
2. css 动画怎么实现，用到哪些样式？
css动画主要是animation和transition
transition的用法
img{
transition:1s 1s height ease;
}
//等同于下面代码
img{
transition-property:height //过渡属性
transition-duration:1s //过渡时间为1s
transition-delay:1s //延迟时间1s
transition-timing-function:ease //过渡速度
//ease:逐渐放慢 ease-in:加速 ease-out:减速 linear:匀速
}
Animation的用法
div:hover{
animation:1s 1s rainbow linear 3 forwards normal;
}
//等同于下面的代码
div:hover{
animation-duration:1s;
animation-delay:1s;
animation-name:rainbow;
animation-timeing-function:linear;
animation-iteration-count:3; // 循环次数，infinite：无限循环
animation-fill-mode:none | forwards | backwards | both ; // 动画结束时保持的状态
// 默认为none：回到开始状态，forwards：保持结束状态，backwards：回到第一帧状态，both：轮流应用forwards和backwards
animation-driction:normal | alternate | reverse | alternate-reverse; // 循环动画时，动画结束后回到的位置，默认normal
}
@keyframes的用法
@keyframes rainbow{
0% {background:#f00;}
50% {background:#ff0;}
100% {background:#0ff;}
}
animation-play-state:动画停止调到动画开始状态
div{
animation: spin 1s linear infinite;
animation-play-state: paused; //动画保持终止时候状态
}
还有很多布局的知识，比如display的用法，position的用法，伪类，优先级，浏览器兼容等等知识。
