整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
覽器解析HTML文件的過程是網頁呈現的關鍵步驟之一。具體介紹如下：
HTML文檔的接收和預處理
解析為DOM樹
CSS解析與CSSOM樹構建
JavaScript加載與執行
渲染樹的構建
布局計算（Layout）
繪制（Paint）
因此，我們開發中要注意以下幾點：
綜上所述，瀏覽器解析HTML文件是一個復雜而高度優化的過程，涉及從網絡獲取HTML文檔到最終將其渲染到屏幕上的多個步驟。開發者需要深入理解這些步驟，以優化網頁性能和用戶體驗。通過合理組織HTML結構、優化資源加載順序、減少不必要的DOM操作和合理安排CSS和JavaScript的加載與執行，可以顯著提升頁面加載速度和運行效率。
tml指超文本標記語言，通過標簽來控制文字和圖片的顯示方式，以.html結尾的文件是Html文檔，學習網站W3school。
Html文檔結構
title標簽是標題標簽，body內部存放能夠看到的所有內容，包含文字，圖片，視屏等。
常見的基本標簽
p標簽是段落標簽，h1標簽是頭部標簽多用于文章標題或副標題，共有六個，img圖片標簽引入圖片，div是最常見的塊級標簽，可以將網頁中的內容劃分出若干個矩形區域，用于存放不一樣的內容。標簽可以分為單標簽和雙標簽。
無序列表
網頁中間有一些內容相似，結構相仿，布局接近的區域，像這一類區域我們就使用無序列表來進行區域劃分。
有序列表
網頁中間還有一些內容相似，結構相仿，布局接近但是每個區域的內容是有先后關系的區域，像這一類區域我們就使用有序列表來進行區域劃分。
編輯軟件vscode
最近本人在準備面試中與CSS相關的內容，為自己后面的面試及復習知識做準備。對于知識而言，有著一個記錄也是十分重要的，也方便自己對自己所了解的技能做總結。大家都知道，在前端面試中CSS也是一個面試的重要考點，下面是本人整理的部分CSS面試考點。
這個問題是面試中CSS極其重要的考點，幾乎經常被問到。對于CSS 盒模型來說，它前端開發中非常基礎而重要的概念之一。它描述了網頁上的每個元素都是一個矩形的盒子，這個盒子由元素的內容(content)、內邊距(padding)、邊框(border)和外邊距(margin)組成。
具體的講，CSS 盒模型包含以下幾個部分：
在 CSS 中，有兩種盒模型：標準盒模型（content-box）和 IE 盒模型（border-box）。
標準盒模型（content-box） 在標準盒模型中，元素的寬度和高度僅包括內容區域的尺寸，不包括內邊距（padding）、邊框（border）和外邊距（margin）。這意味著，當你設置一個元素的寬度為 200px 時，這個寬度值僅包括元素的內容區域，而不包括內邊距、邊框和外邊距的寬度。如下面的示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { margin: 0; padding: 0; } .box { width: 300px; height: 300px; padding: 10px; margin: 20px; border: 5px solid blue; /* box-sizing: border-box; 要求瀏覽器以IE盒子模型來加載盒子 */ box-sizing: content-box; /*要求瀏覽器以標準盒子模型來加載盒子*/ } </style> </head> <body> <div class="box">盒子模型</div> </body> </html>從這個示例中，我們可以看出在標準盒模型中，元素的總寬度計算方式為：內容寬度（width） + 左右內邊距（padding-left + padding-right） + 左右邊框寬度（border-left-width + border-right-width） + 左右外邊距（margin-left + margin-right）。這個總寬度值就是元素所占據的實際空間。也就是說盒子總寬度：width + padding + border + margin = 330
怪異盒模型（IE盒模型） 在 IE 盒模型中，元素的寬度和高度包括了內容區域、內邊距和邊框的尺寸，但不包括外邊距。換句話說，當你設置一個元素的寬度為 300px 時，這個寬度值包括了內容區域、內邊距和邊框的寬度。還是上面的那個例子，但是我們需要在style中加上box-sizing: border-box要求瀏覽器以IE盒子模型來加載盒子。
上面的圖我們可以從中看出，在 IE 盒模型中，元素的總寬度計算方式為：內容寬度（width）（包括內邊距和邊框） + 左右外邊距（margin-left + margin-right）。這個總寬度值同樣是元素所占據的實際空間。也就是是說，盒子總寬度：width + margin，盒子總高度：height + margin。
總的來說，標準盒模型和 IE 盒模型的主要區別在于它們計算元素寬度和高度的方式不同。
CSS選擇器是CSS規則的第一部分，它是元素和其他部分組合起來告訴瀏覽器哪個HTML元素應當是被選為應用規則中的CSS屬性值的方式，選擇器所選擇的元素，叫做“選擇器的對象”。
選擇器的分類： 在css中，選擇器共有如下幾種,這些選擇器可以單獨使用，也可以組合使用。
ID 選擇器：使用元素的 ID 屬性進行選擇，以 # 開頭。例如，#header { color: red; } 會選擇所有具有 id="header" 的元素。 類選擇器：使用元素的類名進行選擇，以 . 開頭。例如，.btn { background-color: blue; } 會選擇所有具有 class="btn" 的元素。 標簽選擇器：根據元素的標簽名稱進行選擇。例如，div { font-size: 16px; } 會選擇所有 <div> 元素。 后代選擇器：選擇指定元素內的后代元素。例如，div p { color: green; } 會選擇所有 <div> 元素內部的 <p> 元素。 子元素選擇器：選擇指定元素的直接子元素。例如，ul > li { list-style-type: none; } 會選擇所有 <ul> 下的直接子元素 <li>。 相鄰兄弟選擇器：選擇指定元素之后緊跟的相鄰兄弟元素。例如，h2 + p { font-weight: bold; } 會選擇所有 <h2> 元素后面緊跟的 <p> 元素。 群組選擇器：將多個選擇器組合在一起，以逗號分隔，同時選擇它們匹配的元素。例如，h1, h2, h3 { color: blue; } 會選擇所有 <h1>、<h2> 和 <h3> 元素，并將它們的顏色設為藍色。 屬性選擇器：根據元素的屬性進行選擇。例如，input[type="text"] { width: 200px; } 會選擇所有 type 屬性為 "text" 的 <input> 元素。 偽類選擇器：根據元素的特定狀態選擇元素，例如鼠標懸停、訪問狀態等。例如，a:hover { text-decoration: underline; } 會選擇鼠標懸停在 <a> 元素上時應用下劃線樣式。 偽元素選擇器：向元素的特定部分添加樣式，例如元素的前面或后面添加內容。例如，p::first-line { font-weight: bold; } 會將 <p> 元素的第一行文本加粗。
優先級： 相信大家對CSS選擇器的優先級都不陌生：內聯選擇器 > ID選擇器 > 類選擇器 > 標簽選擇器。
到具體的計算層?，優先級是由 A 、B、C、D 的值來決定的，其中它們的值計算規則如下：
如果存在內聯樣式，那么 A = 1, 否則 A = 0 B的值等于 ID選擇器出現的次數 C的值等于 類選擇器 和 屬性選擇器 和 偽類 出現的總次數 D 的值等于 標簽選擇器 和 偽元素 出現的總次數
相信大家都知道，在css中單位的使用是十分重要的，因此無論是從適配性還是觀賞性方面來講，了解css的單位對于我們來說也是很有必要的。下面我來為大家介紹一下css中的單位有哪些：
在 CSS 中，常見的單位包括：
@media print and (min-resolution: 300dpi) { /* 在打印時，當分辨率大于 300dpi 時應用的樣式 */ }這些單位可以根據具體的需求選擇使用，能夠靈活控制元素在不同設備上的大小和比例。
當談論設備像素、CSS 像素、設備獨立像素（DIP）、設備像素比（DPR）和像素每英寸（PPI）時，通常是在討論屏幕分辨率、響應式設計和圖像質量等相關概念。下面我來分別解釋它們的含義和區別：
下面我用iPhone SE手機的尺寸作為示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pixel Example</title> <style> .box { width: 100px; /* 使用 CSS 像素定義寬度 */ height: 100px; /* 使用 CSS 像素定義高度 */ background-color: red; margin: 10px; /* 使用 CSS 像素定義外邊距 */ } </style> </head> <body> <div class="box" id="box"></div> <script> // 獲取元素 var box = document.getElementById('box'); // 獲取設備像素比 var dpr = window.devicePixelRatio || 1; // 輸出設備像素比 console.log('dpr:', dpr); // 輸出設備分辨率 console.log('設備分辨率:', screen.width, 'x', screen.height); // 輸出 CSS 像素大小 console.log('CSS px:', box.offsetWidth, 'x', box.offsetHeight); </script> </body> </html>我們可以在瀏覽器的控制臺看到以下的輸出：
綜上所述，設備像素是屏幕上實際的物理像素，CSS 像素是網頁中使用的抽象單位，而設備獨立像素是一個與設備無關的邏輯像素單位。DPR 表示設備像素和 CSS 像素之間的比率，而 PPI 則是描述屏幕或打印機分辨率的單位。在高分辨率屏幕上，DPR 可能會影響 CSS 像素與設備像素之間的關系，從而影響到頁面的顯示效果。
總的來說：
PC端 1px = 1物理像素：在大多數情況下，PC 端的瀏覽器會將 CSS 像素（1px）直接映射到屏幕的物理像素，即 1px 對應于 1 個物理像素。 頁面縮放比為1:1時，1px = 1物理像素：當頁面的縮放比例為 1:1 時，CSS 像素與物理像素的對應關系是一一對應的，即 1px 對應于 1 個物理像素。 設備像素 == 物理像素：在大多數情況下，設備像素和物理像素是同一個概念，都指的是屏幕上的實際像素點。 CSS像素==1px：在絕大多數情況下，1 個 CSS 像素等于 1px（像素單位），但在高分辨率屏幕上，1 個 CSS 像素可能會對應多個物理像素。 設備獨立像素 ==分辨率：設備獨立像素（Device Independent Pixels，DIP）是一個與設備無關的邏輯像素單位，它與屏幕的分辨率無關，而是表示屏幕上的一個虛擬像素。通常情況下，設備獨立像素等于屏幕的分辨率。 dpr(設備像素比) = 設備像素/設備獨立像素：設備像素比（Device Pixel Ratio，DPR）是設備像素和設備獨立像素之間的比率。它表示了在同樣的物理尺寸下，設備像素的數量與設備獨立像素的數量之間的關系。 ppi(像素密度) = 設備像素/屏幕尺寸：像素密度（Pixels Per Inch，PPI）是用于描述屏幕分辨率的單位，表示每英寸長度上的像素數量。通常情況下，PPI 越高，屏幕顯示的圖像就越清晰，因為像素更加密集。
以上就是本次筆者所整理的有關css面試的內容，后面本人還將繼續完善css的面試考點。如有不足之處歡迎大家在評論區進行完善一下，大家一起為了進大廠而努力，一起加油吧！！！
假如您也和我一樣，在準備春招。歡迎加微信shunwuyu，這里有幾十位一心去大廠的友友可以相互鼓勵，分享信息，模擬面試，共讀源碼，齊刷算法，手撕面經。來吧，友友們！
作者：沐渃清澄
鏈接：https://juejin.cn/post/7338717224436793394
來源：稀土掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
