整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
览器解析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小时内与您取得联系。
