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

盒模型盒模型主要兩種，標準盒模型和怪異和模型標準盒模型：width指content部分的寬度怪異盒模型：width指content、padding、border的總寬度解決方法：box-sizing屬性，值為content-box（標準盒模型），值為border-box（怪異盒模型）垂直居 ...

盒模型

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

標準盒模型：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之間存在的空白格