面試總結（一）

leinizisky發表於2018-10-11
面試

心態轉變

在之前的面試中，自己總是過多的去強調業務實現，一直強調自己能完成各種頁面，一直把自己當成一個切圖小妹，美工，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的用法，偽類，優先順序，瀏覽器相容等等知識。

相關文章