前端面試題：瀏覽器如何解析HTML文件？

覽器解析HTML文件的過(guò)程是網(wǎng)頁(yè)呈現(xiàn)的關(guān)鍵步驟之一。具體介紹如下：

HTML文檔的接收和預(yù)處理

網(wǎng)絡(luò)請(qǐng)求處理：當(dāng)用戶(hù)輸入U(xiǎn)RL或點(diǎn)擊鏈接時(shí)，瀏覽器發(fā)起HTTP請(qǐng)求，服務(wù)器響應(yīng)并返回HTML文件。此過(guò)程中，瀏覽器需要處理DNS查詢(xún)、建立TCP連接等底層網(wǎng)絡(luò)通信操作。
預(yù)解析優(yōu)化：為了提高性能，現(xiàn)代瀏覽器在主線(xiàn)程解析HTML之前會(huì)啟動(dòng)一個(gè)預(yù)解析線(xiàn)程，提前下載HTML中鏈接的外部CSS和JS文件。這一步驟確保了后續(xù)渲染過(guò)程的順暢進(jìn)行。

解析為DOM樹(shù)

詞法分析和句法分析：瀏覽器的HTML解析器通過(guò)詞法分析將HTML文本標(biāo)記轉(zhuǎn)化為符號(hào)序列，然后通過(guò)句法分析器按照HTML規(guī)范構(gòu)建出DOM樹(shù)。每個(gè)節(jié)點(diǎn)代表一個(gè)HTML元素，形成了多層次的樹(shù)狀結(jié)構(gòu)。
生成對(duì)象接口：生成的DOM樹(shù)是頁(yè)面元素的結(jié)構(gòu)化表示，提供了操作頁(yè)面元素的接口，如JavaScript可以通過(guò)DOM API來(lái)動(dòng)態(tài)修改頁(yè)面內(nèi)容和結(jié)構(gòu)。

CSS解析與CSSOM樹(shù)構(gòu)建

CSS文件加載與解析：瀏覽器解析HTML文件中的<link>標(biāo)簽引入的外部CSS文件和<style>標(biāo)簽中的內(nèi)聯(lián)CSS，生成CSSOM樹(shù)。CSSOM樹(shù)反映了CSS樣式的層級(jí)和繼承關(guān)系。
CSS屬性計(jì)算：包括層疊、繼承等，確保每個(gè)元素對(duì)應(yīng)的樣式能夠被準(zhǔn)確計(jì)算。這些計(jì)算過(guò)程為后續(xù)的布局提供必要的樣式信息。

JavaScript加載與執(zhí)行

阻塞式加載：當(dāng)解析器遇到<script>標(biāo)簽時(shí)，它會(huì)停止HTML的解析，轉(zhuǎn)而先加載并執(zhí)行JavaScript代碼。這是因?yàn)镴S可能會(huì)修改DOM結(jié)構(gòu)或CSSOM樹(shù)，從而影響已解析的部分。
異步和延遲加載：為了不影響頁(yè)面的初步渲染，可以采用async或defer屬性來(lái)異步加載JS文件，這樣可以在后臺(tái)進(jìn)行JS的加載和執(zhí)行，而不阻塞HTML解析。

渲染樹(shù)的構(gòu)建

合并DOM樹(shù)和CSSOM樹(shù)：有了DOM樹(shù)和CSSOM樹(shù)后，瀏覽器將它們組合成渲染樹(shù)，這個(gè)樹(shù)只包含顯示界面所需的DOM節(jié)點(diǎn)及對(duì)應(yīng)的樣式信息。
不可見(jiàn)元素的排除：渲染樹(shù)會(huì)忽略例如<head>、<meta>等不可見(jiàn)元素，只關(guān)注<body>內(nèi)的可視化內(nèi)容。

布局計(jì)算（Layout）

元素位置和尺寸確定：瀏覽器從渲染樹(shù)根節(jié)點(diǎn)開(kāi)始，遞歸地計(jì)算每個(gè)節(jié)點(diǎn)的精確位置和尺寸，這個(gè)過(guò)程也被稱(chēng)為“回流”或“重排”，是后續(xù)繪制的基礎(chǔ)。
布局過(guò)程的優(yōu)化：現(xiàn)代瀏覽器會(huì)盡量?jī)?yōu)化布局過(guò)程，例如通過(guò)流式布局的方式減少重復(fù)計(jì)算，確保高效地完成布局任務(wù)。

繪制（Paint）

像素級(jí)繪制：繪制是一個(gè)將布局計(jì)算后的各元素繪制成像素點(diǎn)的過(guò)程。這包括文本、顏色、邊框、陰影以及替換元素的繪制。
層次化的繪制：為了高效地更新局部?jī)?nèi)容，瀏覽器會(huì)將頁(yè)面分成若干層次（Layer），對(duì)每一層分別進(jìn)行繪制，這樣只需更新變化的部分。

因此，我們開(kāi)發(fā)中要注意以下幾點(diǎn)：

避免過(guò)度使用全局腳本：盡量減少使用全局腳本或者將它們放在文檔底部，以減少對(duì)HTML解析的阻塞。
合理組織CSS和使用CSS預(yù)處理器：合理組織CSS文件的結(jié)構(gòu)和覆蓋規(guī)則，利用CSS預(yù)處理器進(jìn)行模塊化管理。
利用瀏覽器緩存機(jī)制：通過(guò)設(shè)置合理的緩存策略，減少重復(fù)加載相同資源，提升二次訪問(wèn)的體驗(yàn)。
優(yōu)化圖片和多媒體資源：適當(dāng)壓縮圖片和優(yōu)化多媒體資源的加載，減少網(wǎng)絡(luò)傳輸時(shí)間和渲染負(fù)擔(dān)。

綜上所述，瀏覽器解析HTML文件是一個(gè)復(fù)雜而高度優(yōu)化的過(guò)程，涉及從網(wǎng)絡(luò)獲取HTML文檔到最終將其渲染到屏幕上的多個(gè)步驟。開(kāi)發(fā)者需要深入理解這些步驟，以?xún)?yōu)化網(wǎng)頁(yè)性能和用戶(hù)體驗(yàn)。通過(guò)合理組織HTML結(jié)構(gòu)、優(yōu)化資源加載順序、減少不必要的DOM操作和合理安排CSS和JavaScript的加載與執(zhí)行，可以顯著提升頁(yè)面加載速度和運(yùn)行效率。

tml指超文本標(biāo)記語(yǔ)言，通過(guò)標(biāo)簽來(lái)控制文字和圖片的顯示方式，以.html結(jié)尾的文件是Html文檔，學(xué)習(xí)網(wǎng)站W(wǎng)3school。

Html文檔結(jié)構(gòu)

title標(biāo)簽是標(biāo)題標(biāo)簽，body內(nèi)部存放能夠看到的所有內(nèi)容，包含文字，圖片，視屏等。

常見(jiàn)的基本標(biāo)簽

p標(biāo)簽是段落標(biāo)簽，h1標(biāo)簽是頭部標(biāo)簽多用于文章標(biāo)題或副標(biāo)題，共有六個(gè)，img圖片標(biāo)簽引入圖片，div是最常見(jiàn)的塊級(jí)標(biāo)簽，可以將網(wǎng)頁(yè)中的內(nèi)容劃分出若干個(gè)矩形區(qū)域，用于存放不一樣的內(nèi)容。標(biāo)簽可以分為單標(biāo)簽和雙標(biāo)簽。

無(wú)序列表

網(wǎng)頁(yè)中間有一些內(nèi)容相似，結(jié)構(gòu)相仿，布局接近的區(qū)域，像這一類(lèi)區(qū)域我們就使用無(wú)序列表來(lái)進(jìn)行區(qū)域劃分。

有序列表

網(wǎng)頁(yè)中間還有一些內(nèi)容相似，結(jié)構(gòu)相仿，布局接近但是每個(gè)區(qū)域的內(nèi)容是有先后關(guān)系的區(qū)域，像這一類(lèi)區(qū)域我們就使用有序列表來(lái)進(jìn)行區(qū)域劃分。

編輯軟件vscode

言

最近本人在準(zhǔn)備面試中與CSS相關(guān)的內(nèi)容，為自己后面的面試及復(fù)習(xí)知識(shí)做準(zhǔn)備。對(duì)于知識(shí)而言，有著一個(gè)記錄也是十分重要的，也方便自己對(duì)自己所了解的技能做總結(jié)。大家都知道，在前端面試中CSS也是一個(gè)面試的重要考點(diǎn)，下面是本人整理的部分CSS面試考點(diǎn)。

題目一：請(qǐng)你說(shuō)說(shuō)你對(duì)css盒模型的理解

這個(gè)問(wèn)題是面試中CSS極其重要的考點(diǎn)，幾乎經(jīng)常被問(wèn)到。對(duì)于CSS 盒模型來(lái)說(shuō)，它前端開(kāi)發(fā)中非常基礎(chǔ)而重要的概念之一。它描述了網(wǎng)頁(yè)上的每個(gè)元素都是一個(gè)矩形的盒子，這個(gè)盒子由元素的內(nèi)容(content)、內(nèi)邊距(padding)、邊框(border)和外邊距(margin)組成。

具體的講，CSS 盒模型包含以下幾個(gè)部分：

內(nèi)容區(qū)域（Content） ：指元素內(nèi)部實(shí)際包含內(nèi)容的區(qū)域，例如文字、圖片等。
內(nèi)邊距（Padding） ：內(nèi)容區(qū)域與邊框之間的空白區(qū)域，用來(lái)控制內(nèi)容與邊框的距離。
邊框（Border） ：內(nèi)邊距外部的邊框，用來(lái)圍繞內(nèi)容和內(nèi)邊距的區(qū)域。
外邊距（Margin） ：邊框外部的空白區(qū)域，用來(lái)控制元素與其他元素之間的距離。

盒模型的分類(lèi)：

在 CSS 中，有兩種盒模型：標(biāo)準(zhǔn)盒模型（content-box）和 IE 盒模型（border-box）。

標(biāo)準(zhǔn)盒模型（content-box） 在標(biāo)準(zhǔn)盒模型中，元素的寬度和高度僅包括內(nèi)容區(qū)域的尺寸，不包括內(nèi)邊距（padding）、邊框（border）和外邊距（margin）。這意味著，當(dāng)你設(shè)置一個(gè)元素的寬度為 200px 時(shí)，這個(gè)寬度值僅包括元素的內(nèi)容區(qū)域，而不包括內(nèi)邊距、邊框和外邊距的寬度。如下面的示例：

<!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盒子模型來(lái)加載盒子 */ box-sizing: content-box; /*要求瀏覽器以標(biāo)準(zhǔn)盒子模型來(lái)加載盒子*/ } </style> </head> <body> <div class="box">盒子模型</div> </body> </html>

從這個(gè)示例中，我們可以看出在標(biāo)準(zhǔn)盒模型中，元素的總寬度計(jì)算方式為：內(nèi)容寬度（width） + 左右內(nèi)邊距（padding-left + padding-right） + 左右邊框?qū)挾龋╞order-left-width + border-right-width） + 左右外邊距（margin-left + margin-right）。這個(gè)總寬度值就是元素所占據(jù)的實(shí)際空間。也就是說(shuō)盒子總寬度：width + padding + border + margin = 330

怪異盒模型（IE盒模型） 在 IE 盒模型中，元素的寬度和高度包括了內(nèi)容區(qū)域、內(nèi)邊距和邊框的尺寸，但不包括外邊距。換句話(huà)說(shuō)，當(dāng)你設(shè)置一個(gè)元素的寬度為 300px 時(shí)，這個(gè)寬度值包括了內(nèi)容區(qū)域、內(nèi)邊距和邊框的寬度。還是上面的那個(gè)例子，但是我們需要在style中加上box-sizing: border-box要求瀏覽器以IE盒子模型來(lái)加載盒子。

上面的圖我們可以從中看出，在 IE 盒模型中，元素的總寬度計(jì)算方式為：內(nèi)容寬度（width）（包括內(nèi)邊距和邊框） + 左右外邊距（margin-left + margin-right）。這個(gè)總寬度值同樣是元素所占據(jù)的實(shí)際空間。也就是是說(shuō)，盒子總寬度：width + margin，盒子總高度：height + margin。

總的來(lái)說(shuō)，標(biāo)準(zhǔn)盒模型和 IE 盒模型的主要區(qū)別在于它們計(jì)算元素寬度和高度的方式不同。

題目二：css中的選擇器有哪些？說(shuō)說(shuō)優(yōu)先級(jí)？

CSS選擇器是CSS規(guī)則的第一部分，它是元素和其他部分組合起來(lái)告訴瀏覽器哪個(gè)HTML元素應(yīng)當(dāng)是被選為應(yīng)用規(guī)則中的CSS屬性值的方式，選擇器所選擇的元素，叫做“選擇器的對(duì)象”。

選擇器的分類(lèi)： 在css中，選擇器共有如下幾種,這些選擇器可以單獨(dú)使用，也可以組合使用。

ID 選擇器：使用元素的 ID 屬性進(jìn)行選擇，以 # 開(kāi)頭。例如，#header { color: red; } 會(huì)選擇所有具有 id="header" 的元素。 類(lèi)選擇器：使用元素的類(lèi)名進(jìn)行選擇，以 . 開(kāi)頭。例如，.btn { background-color: blue; } 會(huì)選擇所有具有 class="btn" 的元素。 標(biāo)簽選擇器：根據(jù)元素的標(biāo)簽名稱(chēng)進(jìn)行選擇。例如，div { font-size: 16px; } 會(huì)選擇所有 <div> 元素。 后代選擇器：選擇指定元素內(nèi)的后代元素。例如，div p { color: green; } 會(huì)選擇所有 <div> 元素內(nèi)部的 <p> 元素。 子元素選擇器：選擇指定元素的直接子元素。例如，ul > li { list-style-type: none; } 會(huì)選擇所有 <ul> 下的直接子元素 <li>。 相鄰兄弟選擇器：選擇指定元素之后緊跟的相鄰兄弟元素。例如，h2 + p { font-weight: bold; } 會(huì)選擇所有 <h2> 元素后面緊跟的 <p> 元素。 群組選擇器：將多個(gè)選擇器組合在一起，以逗號(hào)分隔，同時(shí)選擇它們匹配的元素。例如，h1, h2, h3 { color: blue; } 會(huì)選擇所有 <h1>、<h2> 和 <h3> 元素，并將它們的顏色設(shè)為藍(lán)色。 屬性選擇器：根據(jù)元素的屬性進(jìn)行選擇。例如，input[type="text"] { width: 200px; } 會(huì)選擇所有 type 屬性為 "text" 的 <input> 元素。 偽類(lèi)選擇器：根據(jù)元素的特定狀態(tài)選擇元素，例如鼠標(biāo)懸停、訪問(wèn)狀態(tài)等。例如，a:hover { text-decoration: underline; } 會(huì)選擇鼠標(biāo)懸停在 <a> 元素上時(shí)應(yīng)用下劃線(xiàn)樣式。 偽元素選擇器：向元素的特定部分添加樣式，例如元素的前面或后面添加內(nèi)容。例如，p::first-line { font-weight: bold; } 會(huì)將 <p> 元素的第一行文本加粗。

優(yōu)先級(jí)： 相信大家對(duì)CSS選擇器的優(yōu)先級(jí)都不陌生：內(nèi)聯(lián)選擇器 > ID選擇器 > 類(lèi)選擇器 > 標(biāo)簽選擇器。

到具體的計(jì)算層?，優(yōu)先級(jí)是由 A 、B、C、D 的值來(lái)決定的，其中它們的值計(jì)算規(guī)則如下：

如果存在內(nèi)聯(lián)樣式，那么 A = 1, 否則 A = 0 B的值等于 ID選擇器出現(xiàn)的次數(shù) C的值等于類(lèi)選擇器和屬性選擇器和偽類(lèi) 出現(xiàn)的總次數(shù) D 的值等于標(biāo)簽選擇器和偽元素出現(xiàn)的總次數(shù)

題目三：請(qǐng)你說(shuō)說(shuō)css中的單位有哪些？

相信大家都知道，在css中單位的使用是十分重要的，因此無(wú)論是從適配性還是觀賞性方面來(lái)講，了解css的單位對(duì)于我們來(lái)說(shuō)也是很有必要的。下面我來(lái)為大家介紹一下css中的單位有哪些：

在 CSS 中，常見(jiàn)的單位包括：

像素（px）：相對(duì)長(zhǎng)度單位，代表屏幕上的一個(gè)像素點(diǎn)。像素在網(wǎng)頁(yè)設(shè)計(jì)中應(yīng)用非常廣泛，它的值是固定的，不受屏幕分辨率影響。
百分比（%）：相對(duì)長(zhǎng)度單位，相對(duì)于父元素的百分比。例如，width: 50%; 表示元素的寬度為父元素寬度的一半。
EMS（em）：相對(duì)長(zhǎng)度單位，相對(duì)于元素的字體大小。例如，如果元素的字體大小為 16px，font-size: 1.5em; 將會(huì)使元素的字體大小為 24px（1.5 倍的 16px）。
REM（rem）：相對(duì)長(zhǎng)度單位，相對(duì)于根元素（<html>）的字體大小。與 em 不同的是，rem 單位始終是相對(duì)于根元素的字體大小，這樣可以更方便地控制整個(gè)頁(yè)面的比例關(guān)系。
Viewport 百分比單位（vw、vh、vmin、vmax）：相對(duì)長(zhǎng)度單位，相對(duì)于視口大小的百分比。
vw（視口寬度）：1vw 等于視口寬度的 1%。
vh（視口高度）：1vh 等于視口高度的 1%。
vmin（視口寬度和高度中較小的那個(gè)）：1vmin 等于視口寬度和高度中較小值的 1%。
vmax（視口寬度和高度中較大的那個(gè)）：1vmax 等于視口寬度和高度中較大值的 1%。
像素密度單位（dpi、dpcm、dppx） ：用于描述輸出設(shè)備的像素密度。

dpi（每英寸像素?cái)?shù)）：1dpi 表示每英寸有 1 個(gè)像素。
dpcm（每厘米像素?cái)?shù)）：1dpcm 表示每厘米有 1 個(gè)像素。
dppx（每像素點(diǎn)數(shù)）：1dppx 表示每像素點(diǎn)數(shù)為 1。

@media print and (min-resolution: 300dpi) { /* 在打印時(shí)，當(dāng)分辨率大于 300dpi 時(shí)應(yīng)用的樣式 */ }

這些單位可以根據(jù)具體的需求選擇使用，能夠靈活控制元素在不同設(shè)備上的大小和比例。

題目四：說(shuō)說(shuō)設(shè)備像素，css像素，設(shè)備獨(dú)立像素，dpr，ppi的區(qū)別？

當(dāng)談?wù)撛O(shè)備像素、CSS 像素、設(shè)備獨(dú)立像素（DIP）、設(shè)備像素比（DPR）和像素每英寸（PPI）時(shí)，通常是在討論屏幕分辨率、響應(yīng)式設(shè)計(jì)和圖像質(zhì)量等相關(guān)概念。下面我來(lái)分別解釋它們的含義和區(qū)別：

設(shè)備像素（Device Pixel） ：也稱(chēng)物理像素，是顯示設(shè)備（如手機(jī)屏幕、電腦顯示器）實(shí)際的物理像素點(diǎn)。它們是構(gòu)成屏幕圖像的最小單位。通常以屏幕的分辨率來(lái)描述，比如 1920x1080 表示寬度為 1920 個(gè)像素、高度為 1080 個(gè)像素。
CSS 像素（CSS Pixel） ：是網(wǎng)頁(yè)中使用的像素單位，通常在 CSS 中使用。它是一個(gè)抽象的單位，與設(shè)備無(wú)關(guān)，用于定義網(wǎng)頁(yè)上的元素大小、間距等。在大多數(shù)情況下，1 個(gè) CSS 像素對(duì)應(yīng)于 1 個(gè)設(shè)備像素，但在高分辨率屏幕（如 Retina 屏幕）上，1 個(gè) CSS 像素可能對(duì)應(yīng)多個(gè)設(shè)備像素。
設(shè)備獨(dú)立像素（Device Independent Pixel，DIP） ：也稱(chēng)密度無(wú)關(guān)像素（Density Independent Pixel，DP）。它是一種與設(shè)備無(wú)關(guān)的邏輯像素單位，用于測(cè)量元素的尺寸和位置。在 Android 開(kāi)發(fā)中，1 個(gè) DIP 相當(dāng)于屏幕上的 1 個(gè)物理像素，而在 iOS 開(kāi)發(fā)中，1 個(gè) DIP 可能對(duì)應(yīng)于多個(gè)物理像素。
設(shè)備像素比（Device Pixel Ratio，DPR） ：是設(shè)備像素和 CSS 像素之間的比率。它表示了在同樣的物理尺寸下，設(shè)備像素的數(shù)量與 CSS 像素的數(shù)量之間的關(guān)系。例如，DPR 為 2 表示每個(gè) CSS 像素由 2 個(gè)設(shè)備像素組成。
像素每英寸（Pixels Per Inch，PPI） ：是用于描述顯示器或打印機(jī)分辨率的單位，表示每英寸長(zhǎng)度上的像素?cái)?shù)量。PPI 越高，屏幕顯示的圖像就越清晰，因?yàn)橄袼馗用芗?/li>

下面我用iPhone SE手機(jī)的尺寸作為示例：

<!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'); // 獲取設(shè)備像素比 var dpr = window.devicePixelRatio || 1; // 輸出設(shè)備像素比 console.log('dpr:', dpr); // 輸出設(shè)備分辨率 console.log('設(shè)備分辨率:', screen.width, 'x', screen.height); // 輸出 CSS 像素大小 console.log('CSS px:', box.offsetWidth, 'x', box.offsetHeight); </script> </body> </html>

我們可以在瀏覽器的控制臺(tái)看到以下的輸出：

綜上所述，設(shè)備像素是屏幕上實(shí)際的物理像素，CSS 像素是網(wǎng)頁(yè)中使用的抽象單位，而設(shè)備獨(dú)立像素是一個(gè)與設(shè)備無(wú)關(guān)的邏輯像素單位。DPR 表示設(shè)備像素和 CSS 像素之間的比率，而 PPI 則是描述屏幕或打印機(jī)分辨率的單位。在高分辨率屏幕上，DPR 可能會(huì)影響 CSS 像素與設(shè)備像素之間的關(guān)系，從而影響到頁(yè)面的顯示效果。

總的來(lái)說(shuō)：

PC端 1px = 1物理像素：在大多數(shù)情況下，PC 端的瀏覽器會(huì)將 CSS 像素（1px）直接映射到屏幕的物理像素，即 1px 對(duì)應(yīng)于 1 個(gè)物理像素。 頁(yè)面縮放比為1:1時(shí)，1px = 1物理像素：當(dāng)頁(yè)面的縮放比例為 1:1 時(shí)，CSS 像素與物理像素的對(duì)應(yīng)關(guān)系是一一對(duì)應(yīng)的，即 1px 對(duì)應(yīng)于 1 個(gè)物理像素。 設(shè)備像素 == 物理像素：在大多數(shù)情況下，設(shè)備像素和物理像素是同一個(gè)概念，都指的是屏幕上的實(shí)際像素點(diǎn)。 CSS像素==1px：在絕大多數(shù)情況下，1 個(gè) CSS 像素等于 1px（像素單位），但在高分辨率屏幕上，1 個(gè) CSS 像素可能會(huì)對(duì)應(yīng)多個(gè)物理像素。 設(shè)備獨(dú)立像素 ==分辨率：設(shè)備獨(dú)立像素（Device Independent Pixels，DIP）是一個(gè)與設(shè)備無(wú)關(guān)的邏輯像素單位，它與屏幕的分辨率無(wú)關(guān)，而是表示屏幕上的一個(gè)虛擬像素。通常情況下，設(shè)備獨(dú)立像素等于屏幕的分辨率。 dpr(設(shè)備像素比) = 設(shè)備像素/設(shè)備獨(dú)立像素：設(shè)備像素比（Device Pixel Ratio，DPR）是設(shè)備像素和設(shè)備獨(dú)立像素之間的比率。它表示了在同樣的物理尺寸下，設(shè)備像素的數(shù)量與設(shè)備獨(dú)立像素的數(shù)量之間的關(guān)系。 ppi(像素密度) = 設(shè)備像素/屏幕尺寸：像素密度（Pixels Per Inch，PPI）是用于描述屏幕分辨率的單位，表示每英寸長(zhǎng)度上的像素?cái)?shù)量。通常情況下，PPI 越高，屏幕顯示的圖像就越清晰，因?yàn)橄袼馗用芗?/p>

結(jié)語(yǔ)

以上就是本次筆者所整理的有關(guān)css面試的內(nèi)容，后面本人還將繼續(xù)完善css的面試考點(diǎn)。如有不足之處歡迎大家在評(píng)論區(qū)進(jìn)行完善一下，大家一起為了進(jìn)大廠而努力，一起加油吧！！！

假如您也和我一樣，在準(zhǔn)備春招。歡迎加微信shunwuyu，這里有幾十位一心去大廠的友友可以相互鼓勵(lì)，分享信息，模擬面試，共讀源碼，齊刷算法，手撕面經(jīng)。來(lái)吧，友友們！

作者：沐渃清澄
鏈接：https://juejin.cn/post/7338717224436793394
來(lái)源：稀土掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

在線(xiàn)咨詢(xún)

上一篇：全程軟件測(cè)試（八十三）：HTML語(yǔ)言基礎(chǔ)知識(shí)必備—讀書(shū)筆記
下一篇：在 Linux 上查看文件內(nèi)容的 5 種方法 - Linux 中國(guó)

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商