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

来源:https://www.cnblogs.com/coderhf/archive/2020/06/28/13202962.html

盒模型 盒模型主要兩種,標準盒模型和怪異和模型 標準盒模型: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之間存在的空白格

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

總結

大家有什麼要說的,歡迎在評論區留言

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

1、點贊+評論(勾選“同時轉發”)

學習前端,你掌握這些。二線也能輕鬆拿8K以上

 


您的分享是我們最大的動力!

更多相關文章
  • 摘要 近期在review團隊的部分代碼,對比個人初期與如今的git提交記錄,發現初期的提交記錄簡直是五花八門,言不由衷,讓人一打眼看去就覺得這寫的什麼東西。一個好的git提交記錄既方便個人快速的瞭解自我的工作進度、快速的回退版本等,又便於團隊之間的協同開發。故分享一下當前最為規範、流行的git co ...
  • vue項目啟動出現cannot GET /服務錯誤 查看控制台 是一些sass相關庫沒安裝成功 進行下麵操作進行安裝,再次啟動,完美解決! 一、首先說明sass和scss的區別。 1、異同:1)簡言之可以理解scss是sass的一個升級版本,完全相容sass之前的功能,又有了些新增能力。語法形式上有 ...
  • var newArr = []新建一個數據,用於存儲扁平化化後的數組 flatData(arr) { arr.forEach(item => { this.res.push(item) item.children && item.children.length > 0 ? this.flatData ...
  • getCookie(cookie_name) { var allcookies = document.cookie; //索引長度,開始索引的位置 var cookie_pos = allcookies.indexOf(cookie_name); // 如果找到了索引,就代表cookie存在,否則不 ...
  • 一:定義 1.TypeScript無法直接在瀏覽器上運行(node也無法去運行),會被編譯成JavaScript語法再去運行 2.是JavaScript的超集,是靜態類型,一旦定義成某類型,將無法改變 //靜態類型 let c: number=123; c='123';//報錯 c=123; 二:優 ...
  • 1、年齡的問題。年齡確實是一個必須考慮的重要問題,30歲大多已成家,可能已經有了小孩,分給家庭的時間會越來越多,能夠投入的時間和精力必然比不上20出頭的小伙子。但我認為精力反而不是最大的問題,最大的問題是越來越輸不起。到了30歲的人應該都有體會,你做的每一個決策都有很高的機會成本,是牽一發而動全身的 ...
  • 因為所出標簽太多,所以我們很難都用得上或者意識到需要用。 但其實也有許多有趣但是我們未曾發掘的標簽,本文所要介紹的 便是一個。 <dataList>是什麼? 標簽一個類似於 標簽一樣可以通過包裹 來表示控制項可選值的,唯一不同的就是 需要配合 來使用,而且 不表示任何內容,僅作展示。 我們康個慄子: ...
  • 本案例製作一個咖啡銷售網站,通過網站呈現自己的理念和咖啡文化,頁面佈局設計獨特,採用兩欄的佈局形式;頁面風格設計簡潔,為瀏覽者提供一個簡單、時尚的頁面,瀏覽時讓人心情舒暢。 1、網站概述網站的設計思路和設計風格與Bootstrap框架風格完美融合,下麵就來具體地介紹實現的步驟。 2、網站結構 本案例 ...
一周排行
  • 圖文講解,一門教學級邏輯式編程語言,NMiniKanren,的運行原理。 ...
  • 多Sheet導入教程 說明 本教程主要說明如何使用Magicodes.IE.Excel完成多個Sheet數據的Excel導入。 要點 多個相同格式的Sheet數據導入 多個不同格式的Sheet數據導入 主要步驟 1. 多個相同格式的Sheet數據導入 1.1 創建導入Sheet的Dto 主要代碼如下 ...
  • 在KeyPress事件中寫入 private void txtBoxKeyPress(object sender, KeyPressEventArgs e) { if ((e.KeyChar >= 'a' && e.KeyChar <= 'z') || (e.KeyChar >= 'A' && e. ...
  • 在 Xunit 中使用依賴註入 Intro 之前寫過一篇 xunit 的依賴註入相關的文章,但是實際使用起來不是那麼方便 今天介紹一個基於xunit和微軟依賴註入框架的“真正”的依賴註入使用方式 ——— Xunit.DependencyInjection, 來自大師的作品,讓你在測試代碼里使用依賴註 ...
  • 官網 http://www.hzhcontrols.com/ 前提 入行已經7,8年了,一直想做一套漂亮點的自定義控制項,於是就有了本系列文章。 GitHub:https://github.com/kwwwvagaa/NetWinformControl 碼雲:https://gitee.com/kww ...
  • 在項目的實際開發過程中,我們經常會遇到Tab頁面的開發 EciTab控制項有多種使用方式: 下麵介紹Frame容器方式: 下麵介紹的Tab頁面採用的策略是 Tab頁面管理幾個子頁面,頁面組織上用Iframe管理的模式 採用Iframe的原因主要有兩個 1.開發簡單,每一個頁面都是簡單的畫面 2.性能考 ...
  • 引用的DLL MySql.Data.MySqlClient System.Data City實體 public class City { public int ID { get; set; } public string Name { get; set; } public string Countr ...
  • 案例故事: 即時通訊(IM)軟體有很多,比如企業微信,釘釘,飛書,Skype, 微軟的Lync等, 這些軟體現在都很牛,還能監控誰誰在不在電腦旁工作,誰誰誰提前下班溜了。。。 一次偶然的機會,有個妹子請教我,她每天都想準時18點下班, 她問我如何做到: 假裝企業微信線上,併在2個小時後(20點)準時 ...
  • 一.官方文檔 https://pypi.org/project/muggle-ocr/ 二模塊安裝 pip install muggle-ocr # 因模塊過新,阿裡/清華等第三方源可能尚未更新鏡像,因此手動指定使用境外源,為了提高依賴的安裝速度,可預先自行安裝依賴:tensorflow/numpy ...
  • 前言 ​ 關於 Python 這個欄目,咕了幾個月了,今天講講如何發送驗證碼並驗證。 ​ 因為部分原因,寫這篇文章的時候心情是不太好的,播放首歌吧。 代碼 導入 導入yagmail,random和time庫 import yagmail,random,time #導入 yagmail , rando ...