面试总结（一）-白红宇

心态转变

在之前的面试中，自己总是过多的去强调业务实现，一直强调自己能完成各种页面，一直把自己当成一个切图小妹，美工，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 nowrapjustify-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:
    
       //order定义项目的排列顺序，数值越小排列越靠前，默认为0flex-grow:
     
        //定义项目放大属性，默认为0，即若存在空余空间也不放大。若几个项目都为1，则等分，若有2，2的占两份flex-shrink:
      
        //定义项目缩小属性，默认为1，即若空间不足，改项目则缩小。若几个项目都为1，不足时等比缩小。若值为0，则不缩小flex-basis:
       
        |auto    //默认值为auto,即项目本来的大小。flex:none|[<'flex-grow'> <'flex-shrink'>? || <'flex-basis'>]    //默认值为0 1 autoflex:auto   //即为0 1 autoflex:none   //即为0 0 autoalign-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的用法，伪类，优先级，浏览器兼容等等知识。