2023年前端面试高频考点HTML5+CSS3
目录
浏览器的渲染过程⭐⭐⭐
CSS 、JS 阻塞 DOM 解析和渲染
回流（重排）和重绘⭐⭐
选择器
ID选择器、类选择器、标签选择器（按优先级高到低排序）⭐⭐
特殊符号选择器（＞,+,~，空格，逗号）
属性选择器
伪类和伪元素选择器（⭐手写）伪类和伪元素选择器
优先级⭐⭐⭐
样式方式（按优先级高到低排序）⭐⭐
内联样式表（在标签内设置元素的样式）
嵌入样式表（在head标签内）
外部样式表（在head标签内）
position关键字⭐⭐⭐
水平 & 垂直对齐 （⭐手写）
水平居中
水平垂直居中
transform:translate
flex（强烈推荐）
flex布局⭐⭐⭐
align-items和justify-content的区别
flex:1
BFC规范⭐⭐⭐
问题
常见触发条件
规则
单位⭐⭐⭐
px转rem
px转vw
行内素、块级元素和行内块元素⭐⭐⭐
响应式布局⭐⭐
浏览器的渲染过程⭐⭐⭐
1.解析HTML的所有标签，深度遍历生成DOM Tree
2.解析CSS，构建层叠样式表模型CSSOM(CSS Object Model)
2.5.JS脚本加载
a. 普通js/sync
文档解析的过程中，如果遇到script脚本，就会停止页面的解析进行下载，当脚本都执行完毕后，才会继续解析页面。
（因为JS可以操作DOM和CSS，可能会改动DOM和CSS，所以继续解析会造成浪费）。
如果脚本是外部的，会等待脚本下载完毕，再继续解析文档。
所以常见的做法是将js放到页脚部分。
b. async（异步：HTML加载和解析，js加载）
async脚本会在加载完毕后执行。
async脚本的加载不计入DOMContentLoaded事件统计，也就是说下图两种情况都是有可能发生的：
HTML 还没有被解析完的时候，async脚本已经加载完了，那么 HTML 停止解析，去执行脚本，脚本执行完毕后触发DOMContentLoaded事件。
HTML 解析完了之后，async脚本才加载完，然后再执行脚本，那么在HTML解析完毕、async脚本还没加载完的时候就触发DOMContentLoaded事件
c. defer(推迟)
文档解析时，遇到设置了defer的脚本，就会在后台进行下载，但是并不会阻止文档的渲染，当页面解析和渲染完毕后，会等到所有的defer脚本加载完毕并按照顺序执行完毕才会触发
DOMContentLoaded事件，也就是说下图两种情况都是有可能发生的：
HTML 还没有被解析完的时候，defer脚本已经加载完了，那么 等待HTML 解析完成后执行脚本，脚本执行完毕后触发DOMContentLoaded事件。
HTML 解析完了之后，defer脚本才加载完，然后再执行脚本，脚本执行完毕后触发DOMContentLoaded事件。
defer是“渲染完再执行”：依赖于页面中的DOM元素（文档是否解析完毕），或者被其他脚本文件依赖
async是“下载完就执行”：并不关心页面中的DOM元素（文档是否解析完毕），并且也不会产生其他脚本需要的数据。
3.构建Render Tree（渲染树）
DOM和CSSOM根据一定的规则组合起来生成了Render Tree
4.布局（Layout）
确定各个元素的位置，以及大小。浏览器使用一种流式处理的方法，只需要一次绘制操作就可以布局所有的元素。
5.绘制（Painting）
浏览器会遍历Render Tree渲染树，调用“paint”方法，将渲染树的各个节点绘制到屏幕上。
CSS 、JS 阻塞 DOM 解析和渲染
浏览器将页面从网络下载到本地后：
解析HTML，创建DOM，同时加载依赖的资源：CSS、图片等（加载资源的过程不会阻塞DOM解析），然后调用渲染进程渲染到界面上。
所谓渲染，就是显示
- css不阻止dom的解析
- js阻止dom的解析：js有可能影响dom的解析，比如在js里面新增dom等这些操作
- css js都会阻止dom的渲染：dom的渲染 是需要等js，css都解析完成后才进行的
尽量将CSS放头部，JS放底部，这样可以提高页面的性能。
为了减缓渲染被阻塞的情况，现代的浏览器都使用了猜测预加载。
当解析被阻塞的时候，浏览器会有一个轻量级的HTML（或CSS）扫描器（scanner）继续在文档中扫描，查找那些将来可能能够用到的资源文件的url，在渲染器使用它们之前将其下载下来。
回流（重排）和重绘⭐⭐
回流（重排）
元素改变 尺寸，宽高，边框，内容，位置 都会引起重排，导致需要重新构建页面的时候
- 增删可见的 DOM 元素的时候
- 元素的位置发生改变
- 元素的尺寸发生改变
- 内容改变
- 页面第一次渲染的时候
重绘
外观发生改变，但没有改变布局
列举一些相关的 CSS 样式：color、background、background-size、visibility、box-shadow
选择器
ID选择器、类选择器、标签选择器（按优先级高到低排序）⭐⭐
红色
绿色
黑色
特殊符号选择器（＞,+,~，空格，逗号）
群组选择器（’,’）
/* 表示同时选择h1,h2 */
h1, h2 {
...
}子元素选择器（空格）
/* 表示选择 h1 下面的所有 span 元素，不管是否以 h1 为直接父元素 */
h1 span {
...
}直接子元素选择器（’>’）
/* 表示 h1 下面的所有以 h1 为直接父元素的 span 元素，注意与空格的区别*/
h1 > span {
...
}相邻兄弟选择器（’+’）
/* 表示选择紧跟在 h1 后的首个兄弟 span 元素，h1 和 span 必须有相同的父元素，即二者必须是同一级元素 */
h1 + span {
...
}兄弟选择器（’~’）
/* 表示选择 h1 后的所有兄弟 span 元素，h1 和 span 必须有相同的父元素，即二者必须是同一级元素。注意与 + 的区别，+ 必须是紧跟着的兄弟元素，而 ~ 不要求紧跟，是所有兄弟元素 */
h1 ~ span {
...
}属性选择器
属性选择元素
[title]
{
color:blue;
}伪类和伪元素选择器（⭐手写）伪类和伪元素选择器
伪类选择器：逻辑选择元素
selector:pseudo-class {property:value;}
菜鸟教程(runoob.com)
注意： a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。
注意： a:active 必须在 a:hover 之后。
- nth-child(n)
nth-child(n)匹配属于其父元素的第n个子元素，不论元素类型，n可以是数字、关键词、或公式。关键词odd和even是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）
- 1
- 2
- 3
- 4
- 伪元素