對應的前端知識總結歸納（常被問到的知識）

梅巴哥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 未完待續

相關文章