百度前端

2020.09.14 百度筆試（Web前端研發試卷）

• 單選 9
• 多選 11
• 程式設計 3

---

• JSON.Stringify方法
  JSON 通常用於與服務端交換資料。
  在向伺服器傳送資料時一般是字串。
  我們可以使用 JSON.stringify() 方法將 JavaScript 物件轉換為字串。

  JSON.stringify(value[, replacer[, space]])

  JSON 不能儲存 Date 物件。
  JSON.stringify() 會將所有日期轉換為字串。
  JSON 不允許包含函式，JSON.stringify() 會刪除 JavaScript 物件的函式，包括 key 和 value。
  
  

• 類、標籤優先順序
  CSS 7 種基礎的選擇器：

  ID 選擇器， 如 #id{}
  類選擇器， 如 .class{}
  屬性選擇器， 如 a[href=“segmentfault.com”]{}
  偽類選擇器， 如 :hover{}
  偽元素選擇器， 如 ::before{}
  標籤選擇器， 如 span{}
  通配選擇器， 如 *{}

  優先順序關係：內聯樣式 > ID 選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 標籤選擇器 = 偽元素選擇器
  
  

• CSS calc( )函式
  calc（）函式用於動態計算長度值

  需要注意的是，運算子前後都需要保留一個空格，例如：width: calc(100% - 10px)；
  任何長度值都可以使用calc（）函式進行計算；
  calc（）函式支援“ +”，“-”，“ *”，“ /”運算；
  calc（）函式使用標準的數學運算優先順序規則；
  
  

• propertype
  每個函式都有一個prototype屬性，這個屬性是指向一個物件的引用，這個物件稱為原型物件，原型物件包含函式例項共享的方法和屬性，也就是說將函式用作建構函式呼叫（使用new操作符呼叫）的時候，新建立的物件會從原型物件上繼承屬性和方法。
  
  

• 元素隱藏

1. opacity: 0

   設定透明度為0，只能從視覺上隱藏元素，本身依然佔據它自身的位置並對網頁佈局起作用。它也將響應使用者互動。在讀屏軟體中不會被隱藏。

2. display: none

   真正隱藏元素，將display設定為none確保元素不可見且連盒模型也不生成，也不佔據任何空間，任何對其直接的任何使用者互動操作都不起作用。讀屏軟體也不會讀到元素內容，這種方式產生的效果就像該元素完全不存在。
   【注意】可通過DOM來操作該元素，就像操作其他元素一樣。

3. visibility：hidden

   如同opacity屬性，隱藏的元素依然會對頁面佈局產生作用，但不同的是它不響應使用者互動。且在讀屏軟體中也會被隱藏。

4. position：absolute 絕對定位到看不到的地方

   若有一個元素，你既想對其進行互動操作，又不想其影響你的頁面佈局，可使用該屬性，將元素移出可視區域。隱藏的元素可被讀屏軟體讀取到。

   5.clip-path

   此方法是通過剪裁它們來實現
   程式碼：clip-path：polygon（0px,0px,0px,0px,0px,0px,0px,0px）
   雖然元素自身不再顯示，但仍佔據本該佔據的矩形大小。此外，該屬效能夠使用各種過度動畫來實現不同的效果。

• CSS前處理器
  CSS前處理器是一種專門的程式語言，用來為CSS增加一些程式設計特性（CSS本身不是程式語言）。
  不需要考慮瀏覽器相容問題，因為CSS前處理器最終編譯和輸出的仍是標準的CSS樣式。
  可以在CSS前處理器中：使用變數、簡單邏輯判斷、函式等基本程式設計技巧。
  流行的CSS前處理器：Sass、LESS、Stylus、PostCSS
  
  

• CSS偽類（pseudo-class） nth_child(on+1)/:first-child/:nth-child()
  CSS偽類用於向某些選擇器新增特殊的效果

  錨偽類：

  :link //未訪問的連結
  :visited //已訪問的連結
  :hover //滑鼠停留在連結上
  :active //選定的連結

  【補】

  :focus //擁有鍵盤輸入焦點的元素

• :first-child 偽類： 選擇元素的第一個子元素

  匹配第一個<P>元素 p:first-child

  匹配所有<p>元素中的第一個<i>元素 p>i:first-child

  匹配所有作為第一個子元素的<P>元素中的所有<i>元素 p:first-child i
  
  

• :lang 偽類：為不同的語言定義特殊的規則
  
  

• 【補充】
  CSS text-transform屬性 控制文字大小寫

  text-transform: none 預設值，定義帶有大小寫字母的標準文字
  text-transform: uppercase 定義僅有大寫字母
  text-transform: lowercase 定義僅有小寫字母
  text-transform: capitalize 每個單詞以大寫字母開頭
  text-transform: inherit 從父元素繼承text-transform屬性的值

  CSS font-weight屬性 設定文字粗細

  font-weight: normal 預設值，標準字元
  font-weight: bold 定義粗體
  font-weight: bolder 定義更粗的
  font-weight: lighter 定義更細的
  font-weight: 100~900 由粗到細 400等同於normal 700等同於bold
  font-weight: inherit 從父元素繼承