前端面試之瀏覽器/HTML/CSS問題

盒模型

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

• 標準盒模型：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就可以了

總結

大家有什么要說的，歡迎在評論區留言

對了，小編為大家準備了一套2020最新的web前端資料，需要點擊下方鏈接獲取方式

1、點贊+評論（勾選“同時轉發”）

學習前端，你掌握這些，二線也能輕松拿8K以上

標籤：Html/Css

上一篇：Web 創建設計

下一篇：要為了興趣轉行去做程式員嗎？