面試瀏覽器/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就能夠了