對應的前端知識總結歸納(常被問到的知識)

梅巴哥er 發表於 2020-12-28

大家好,我是梅巴哥er上篇 對前端經典問題進行了總結。 本篇,我們來總結一下前端的知識,做個歸納。

本篇分為若干的版塊,如

  • html版塊,
  • css版塊,
  • js版塊,
  • es版塊,
  • react等框架版塊(我用的是react,主要介紹react),
  • webpack等打包工具的版塊,後端node版塊,
  • 封裝介面ajax版塊,
  • 實操場景問題的處理
  • 其他
    其中css佔比較大,其次是js和es的知識,都比較瑣碎。框架和後端的知識佔比少,但是一般都是大知識點,系統性問題。

首先來看看HTML版塊

這個版塊包含的知識不太多,在專案程式碼量裡通常佔比1%左右,常敲程式碼很容易達到熟練甚至精通的。重點關注HTML5的知識,經常搞點新花樣。那我們來總結下相關知識。

常用的學習網站:

知識歸納:

  • 相容性:凡是提到相容性,主要考慮IE瀏覽器。IE9以後開始支援部分HTML5屬性,其他瀏覽器都支援。
  • 新特性:(你知道哪些?用過哪些?)
    • 用於繪畫的 canvas 元素
    • 用於媒介回放的 video 和 audio 元素
    • 對本地離線儲存的更好的支援
    • 新的特殊內容元素,比如 article、footer、header、nav、section
    • 新的表單控制元件,比如 calendar、date、time、email、url、search
  • Doctype的作用是什麼?嚴格模式與混雜模式如何區分?它們有何意義?
    • Doctype宣告於文件最前面,告訴瀏覽器以何種方式來渲染頁面,這裡有兩種模式,嚴格模式和混雜模式。
    • 嚴格模式的排版和JS 運作模式是 以該瀏覽器支援的最高標準執行
    • 混雜模式,向後相容,模擬老式瀏覽器,防止瀏覽器無法相容頁面
  • 對HTML語義化標籤的理解
    • HTML5語義化標籤是指正確的標籤包含了正確的內容,結構良好,便於閱讀,比如nav表示導航條,類似的還有article、header、footer等等標籤
  • link標籤和import標籤的區別
    • link屬於html標籤,而@import是css提供的
    • 頁面被載入時,link會同時被載入,而@import引用的css會等到頁面載入結束後載入
    • link是html標籤,因此沒有相容性,而@import只有IE5以上才能識別
    • link方式樣式的權重高於@import的
  • 講一下塊元素和行元素,行內塊元素
    • 塊元素:獨佔一行,並且有自動填滿父元素,可以設定margin和pading以及高度和寬度
    • 行元素:不會獨佔一行,width和height會失效,並且在垂直方向的padding和margin會失
    • 行內塊元素:不自動換行,從左到右排列在一行,可以設定寬高。

CSS&CSS3版塊

常用的學習網站:

知識總結:

  • 如何畫一個三角形。通過邊框border來處理。
<!DOCTYPE HTML>
<html lang="zh-CN">
 <head>
  <title>三角形制作</title>
  <meta charset="UTF-8" />
  <style>
   .point {
    width: 0px;
    height: 0px;
    border-top: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 50px solid pink;
     }
  </style>
 </head>
 <body>
  <div class="point">
  </div>
 </body>
</html>
  • 說一下css盒模型
    • 盒模型,就是用來裝頁面上的元素的矩形區域。CSS中的盒子模型包括IE盒子模型和標準的W3C盒子模型
    • 標準盒子模型的盒子寬度:就是內容的寬度,包括左右border+左右padding+width
    • 在IE盒子模型中,width表示content+padding+border這三個部分的寬度
    • 在CSS3中引入了box-sizing屬性,box-sizing:content-box;表示標準的盒子模型,box-sizing:border-box表示的是IE盒子模型
    • box-sizing:padding-box,這個屬性值的寬度包含了左右padding+width
  • 畫一條0.5px的線
    • 寫這個有很多方法,但是需要特別注意的是在不同瀏覽器上的顯示問題,在web端和移動端顯示也會不同。
  • CSS3新屬性
    • CSS3邊框如border-radius,box-shadow等;CSS3背景如background-size,background-origin等;CSS3 2D,3D轉換如transform等;CSS3動畫如animation等。
  • 談談Flex佈局
    • https://www.runoob.com/css3/css3-flexbox.html
  • 垂直居中的方法,儘可能多寫
    • 父元素固定寬高,利用定位及設定子元素margin值為自身的一半
    • 父元素固定寬高,子元素設定position: absolute,margin:auto平均分配margin
    • css3屬性transform。子元素設定position: absolute; left: 50%; top: 50%;transform: translate(-50%,-50%);即可
    • 彈性佈局display: flex。設定align-items: center; justify-content: center
    • line-height
  • 關於js動畫和css3動畫的差異性
    • 功能涵蓋面,js比css大
    • 實現/重構難度不一,CSS3比js更加簡單,效能跳優方向固定
    • 對幀速表現不好的低版本瀏覽器,css3可以做到自然降級
    • css動畫有天然事件支援
    • css3有相容性問題
  • visibility=hidden, opacity=0, display=none,三者有何區別
    • opacity=0,該元素隱藏起來了,但不會改變頁面佈局,並且,如果該元素已經繫結一些事件,如click事件,那麼點選該區域,也能觸發點選事件的visibility=hidden,該元素隱藏起來了,但不會改變頁面佈局,但是不會觸發該元素已經繫結的事件display=none,把元素隱藏起來,並且會改變頁面佈局,可以理解成在頁面中把該元素刪除掉一樣。
  • 雙邊距重疊問題
    • 多個相鄰(兄弟或者父子關係)普通流的塊元素垂直方向marigin會重疊
    • 摺疊的結果為:
      • 兩個相鄰的外邊距都是正數時,摺疊結果是它們兩者之間較大的值。
      • 兩個相鄰的外邊距都是負數時,摺疊結果是兩者絕對值的較大值。
      • 兩個外邊距一正一負時,摺疊結果是兩者的相加的和。
  • position屬性比較
    • 固定定位fixed:
      • 元素的位置相對於瀏覽器視窗是固定位置,即使視窗是滾動的它也不會移動。Fixed定位使元素的位置與文件流無關,因此不佔據空間。 Fixed定位的元素和其他元素重疊。
    • 相對定位relative:
      • 如果對一個元素進行相對定位,它將出現在它所在的位置上。然後,可以通過設定垂直或水平位置,讓這個元素“相對於”它的起點進行移動。 在使用相對定位時,無論是否進行移動,元素仍然佔據原來的空間。因此,移動元素會導致它覆蓋其它框。
    • 絕對定位absolute:
      • 絕對定位的元素的位置相對於最近的已定位父元素,如果元素沒有已定位的父元素,那麼它的位置相對於。 absolute 定位使元素的位置與文件流無關,因此不佔據空間。 absolute 定位的元素和其他元素重疊。 、
    • 預設定位Static:
      • 預設值。沒有定位,元素出現在正常的流中(忽略top, bottom, left, right 或者 z-index 宣告)。
  • 清除浮動的方法參考
    • 為什麼要清除浮動
      • 清除浮動主要是為了解決在不給定父盒子高度的情況下,子盒子浮動引起的父盒子內部高度為0的問題。
      • 正常情況下 即子盒子不浮動,父盒子裡包含的子盒子,不給定父盒子高度值,子盒子也會把父盒子撐開,讓父盒子包裹住子盒子
      • 子盒子浮動的情況下,父盒子不給定高度值,父盒子高度就變成0,子盒子從父盒子裡浮動出來,脫離了父盒子。
    • 方法一:使用帶clear屬性的空元素
      • 在最後一個浮動元素後使用一個空元素如<div class="clear"> </div>,並在CSS中賦予.clear {clear:both;}屬性即可清理浮動。
    • 方法二:使用CSS的overflow屬性
      • 給浮動元素的父盒子新增overflow:hidden;overflow:auto;可以清除浮動,另外在 IE6 中還需要觸發 hasLayout ,例如為父元素設定容器寬高或設定 zoom:1。
    • 方法三:使用CSS的:after偽元素
    • 方法四:實用css的:before和:after雙偽元素
  • css選擇器有哪些,優先順序排序怎麼排?
    • 選擇器型別
      • 標籤選擇器: 如 p {...}
      • 偽元素選擇器:如p:before {content: ...}p:after {content: ...}
      • 類選擇器: 如 <div class='hi'></div>在css中寫 .hi {...}
      • 偽類選擇器: 如a:link, a:visited, a:hover, a:active, a:focus
      • id選擇器: 如 <div id='hi'></div>在css中寫 #hi {...}
    • 其他選擇器
      • 根據以上選擇器的排列組合,又衍生出若干個選擇器
      • 後代選擇器,如p span { }。p標籤內的所有span標籤
      • 子代選擇器,如p>span。p標籤裡的第一個span標籤
      • 相鄰兄弟選擇器,如p+h3,挨著p標籤後面的一個h3標籤
      • 通用兄弟選擇器,如div~p,div標籤後的所有p標籤
      • 群組選擇器,如p, h3, .hi, #ha
      • 屬性選擇器,如 <a href='', title=''></a>[title] {...}
      • 通用選擇器,如*p,指的是所有p標籤
    • 選擇器的優先順序
      • !important > 內聯樣式 > id選擇器 > 類、偽類、屬性選擇器 > 標籤、偽元素選擇器
      • 對應的權重分別是10000、1000、100、10、1
  • 如何實現圖片在某個容器中上下左右居中擺放?
    • 方法一:給父盒子新增padding,並用box-sizing: border-box;保持盒子大小
      • padding: (父盒子的高-子盒子的高)/2 (父盒子的寬-子盒子的寬)/2; box-sizing: border-box;
    • 方法二:給子盒子新增margin屬性
      • margin: (父盒子的高-子盒子的高)/2 (父盒子的寬-子盒子的寬)/2;
    • 方法三:line-height+父盒子padding-left+box-sizing
    • 方法四:line-height+子盒子margin:auto
    • 方法五:css3屬性transform。子元素設定position: absolute; left: 50%; top: 50%;transform: translate(-50%,-50%);
    • 方法六:給父盒子設定屬性。display: flex; align-items: center; justify-content: center;
    • 方法七: 將父元素設定成display: table, 子元素設定為單元格 display: table-cell
  • 怎麼讓子盒子上下左右居中?
    • 參考上面的問題,但是方法三和方法四隻適用於子盒子是行元素或行內塊元素。
  • float的元素,它的display的屬性是什麼?
    • display: block;
  • 隱藏頁面中某個元素的方法有哪些
    • display:none;
    • visibility:hidden;
    • opacity: 0;
    • position移到外部,
    • z-index塗層遮蓋等等
  • 三欄佈局的實現方式,儘可能多寫。浮動佈局時,三個div的生成順序有沒有影響?

----2.4 未完待續

相關文章