盒模型

盒模型主要兩種，標準盒模型和怪異和模型

• 標準盒模型：width指content部分的寬度
• 怪異盒模型：width指content、padding、border的總寬度
• 解決方法：box-sizing屬性，值為content-box（標準盒模型），值為border-box（怪異盒模型）

垂直居中方法

• 已知寬高，左上50%，坐上外邊距縮排長寬一半的負值

div.box{
    weight:300px;
    height:400px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-150px;
    margin-top:-200px;
}
複製程式碼
 

• 未知寬高，同上，將上面最後縮排使用transform：translate（-50% ，-50%）；
• flex佈局（設定父容器）

div.father{
    display:flex;
    justify-content:center;
    align-items:center;
}
複製程式碼

講講flex

父容器屬性

• flex-direction : row(水平,左起)、row-reverse(水平，右起)、column（垂直，上起）、column-reverse（垂直，下起）
• flex-wrap : nowrap(不換行)、wrap（換行，第一行在上），wrap-reverse（換行，第一行在下）
• flex-flow ： 上面兩個屬性的縮寫形式
• justify-content:flex-start(左對齊)，flex-end(右對齊)，center(居中對齊)，space-between（均勻分佈），space-around(每個專案左右間隙相同，不發生重疊)
• align-items ： flex-start,flex-end,center,baseline(專案第一行文字基線對齊),stretch(若未設定高度，則佔滿整個高度)

專案屬性

• order：排列順序，數值越大越靠前

• flex：是(flex-grow,flex-shrink 和 flex-basis)三個屬性的合併

  flex-grow:專案放大比例。預設為0 flex-shrink:若超出，專案按比例縮小，預設為1 flex-basis:專案大小，預設為auto（即本來的大小）

• flex-self：專案單獨的對齊的方式，可覆蓋align-items屬性

清除浮動問題：

overflow: hidden;元素後面加空標籤，並設定clear：both（清除浮動）；給父元素設定寬高；利用偽元素

.clear:after{
    content:"";//內容為空
    height:0;//高為0；
    line-heght:0;//行高為0
    dispaly:block;//轉為塊級元素
    visibility:hidden;//將元素隱藏
    clear:both;//清除浮動
}
.clear{
    zoom:1;//相容IE
}
複製程式碼

三欄佈局

• 左右浮動，中間部分設定左右margin

行內元素？塊級元素？

• 行內元素：a b span img input select strong

• 塊級元素：div ul ol li dd dt h1-h6 p

html語義化標籤

• 為什麼語義化： 1.易修改，易維護； 2.無障礙閱讀支援； 3.利於SEO

常見的相容性問題

• 不同的瀏覽器預設margin和padding不同。
• 塊元素float後，有橫向的margin。解決方式：設定成行級元素（inline）

display：none與visibility:hidden區別：

前者不佔用空間，也就是none沒了，後者只是隱藏起來，依舊佔用空間。

bfc規範：

說說他有什麼特性可以解決什麼問題：

• 特性1：垂直方向的距離由margin決定，同一個BFC內的元素的margin會疊加（注意是疊加，而不是重疊），相鄰的兩個獨立BFC才會重疊。
• 特性2：計算BFC元素高度時，浮動元素也會進行計算，可以解決浮動塌陷的問題，方法時overflow不為visible即可。

瀏覽器如何解析css節點？

• css樹左面是父節點，向由依次時此父節點的分支子節點，瀏覽器解析時是從右面的子節點開始向左面父節點一步步解析的
• 原因：每一個子節點只有一個父節點，每次查詢都會成功，可每個父節點不單單一個子節點，可能有多個，在查詢時，可能存在不匹配的情況，浪費時間。

元素豎向百分比設定相對於父元素的寬度，而不是高度。

li與li之間的空格是怎麼引起的？如何消除？

• 行元素的排列會受到中間空格的影響，因為中間空格也算字元，所以會導致空格的出現。只需把字元大小設定成0就消除了。

瀏覽器是如何渲染介面的？

• 在伺服器獲取html文件（少一次http請求）
• 解析文件構建dom樹、css樹（主要是結構）
• 構建渲染樹（將css規則渲染到dom樹上，主要是色彩）
• 佈局（發生重構和重繪）

http狀態碼

• 1開頭的（表示臨時響應）

• 2開頭的（表示成功）

  • 200：伺服器成功處理
  • 204：收到請求，但返回空資訊（區別於304）

• 3開頭的（代表重定向類）

  • 300：請求資源可在多處得到
  • 304：請求內容未發生變化，繼續使用快取（當協商快取時放回304，繼續使用強快取內容）

• 4開頭的（客戶端錯誤）

  • 403：拒絕訪問（例如你的github連結設定自己可見，當別人點選你的GitHub連結會返回404）
  • 404：這個是最常見的，訪問內容不存在。

• 5開頭的（服務端錯誤）

  • 500：伺服器內部錯誤

如何實現一個瀏覽器內多個標籤通訊

• websocket：這是一種全雙工通訊（雙方都可傳送可接受），可實現標籤之間的通訊。
• localstorage：本地快取，可理解為多個標籤公用的儲存空間，

如何對網站檔案資源進行優化

• sprites合併圖片
• cdn內容分發（因為單次對某一個儲存檔案和資源的站請求檔案的數量的大小是一定的，一次只能請求部分檔案，需要返回檔案再次請求，這樣多次請求時間的疊加會浪費時間。如果採用cdn分發，檔案和資源會分別儲存在多個站點，我們可以一次對多個站點同時傳送請求，這樣節省時間，就時費頻寬。）
• 使用快取
• 壓縮檔案
• 減少dom操作

常見的相容性問題

• 預設margin、padding不同
• IE雙邊距：快屬性float後，IE顯示的margin比設定的大，解決辦法是轉換為行元素
• chrome中小於12px的文字按照12px處理

前端效能優化

• 減少http請求：

  • 合併js檔案
  • 合併css檔案
  • 雪碧圖（將頁面使用的圖片合併成一張圖片，使用時使用定位 ）

• 減少資源體積

  • js壓縮
  • css壓縮
  • 圖片壓縮

• 快取

  • DNS快取

  • CDN部署

  • http快取

• 移動端優化

  • 首屏優化

• 渲染和操作dom

  • css放在頭部，js放在尾部
  • 避免頻繁操作dom

• 資料處理方面

  • 圖片預載入
  • 圖片懶載入

前端需要注意哪些SEO

• 語義化標籤
• 提高網站速度
• 非裝飾性圖片要加alt
• 重要內容放在前面
• 合理的title、description、keywords

canvans和SVG區別

• svg所繪製出來的圖形都是獨立的dom節點，便於繫結事件或修改，canvans就是一整個畫布
• svg是向量圖形，放大或縮小不失真，canvans反之，

說說css3的flex

• 傳統佈局中塊元素是垂直排列，行元素水平排列，flex彈性佈局擺脫了這種限制，可以幹小的進行空間分配，對齊和佈局。

瀏覽器相容問題

• 不同瀏覽器預設margin，padding不同，可初始化css樣式
• IE雙邊距，設定為inline
• Chrome 中文介面下預設會將小於 12px 的文字強制按照 12px 顯示,可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。
• 超連結訪問過後hover樣式就不出現了，被點選訪問過的超連結樣式不再具有hover和active了。解決方法是改變CSS屬性的排列順序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

li之間存在的空白格

• 因為li之間存在空格，空格也算一個字元，所以會有間隔，把字元大小設定成為0就可以了