，--- theme: condensed-night-purple
本文已参与[新人创作礼]活动，一起开启掘金创作之路
一. HTML面试题
1. 如何理解HTML语义化？
在提倡语义化之前，你可能会使用各种各样的标签去实现同样的功能
使⽤了语义化标签的程序，可读性明显增强，开发者可以比容易和清晰地看出⽹⻚的结构；
这也更利于整个开发团队的协作开发和后续维护工作
2. script标签中defer和async的区别
`script`:会阻碍HTML解析，只有下载好并执行脚本才会继续解析`HTML`
`async script`：解析HTML过程中进行脚本的异步下载，下载成功立马执行完全依赖于网络传输结果，谁先到执行谁，有可能会阻断`HTML`的解析
`defer script`: 完全不会阻碍HTML的解析，解析完成之后再按照顺序执行脚本
3.从浏览器地址栏输入url到请求返回发生了什么
(1) 输入`URL`后解析出协议，主机，端口，路径等信息，并创建一个`HTTP`请求
强缓存，协商缓存
(2) `DNS`域名解析
(3)` TCP`连接(三次握手)第一次握手可以确认客服端的发送能力，第二次握手，确认了服务端的发送能力和接收能力，所以第三次握手才可以确认客户端的接收能力。不然容易出现丢包的现象。
(4) `HTTP`请求
(5) 服务器处理请求（通过路由读取资源）并返回`HTTP`报文（报头中把` Content-type` 设置为 `'text/html'`）
(6) 浏览器渲染页面{浏览器进` DOM `树构建,浏览器发送请求获取嵌在 `HTML `中的资源（如图片、音频、视频、`CSS`、`JS`等)浏览器显示完成页面}
(7) 断开`TCP`连接(浏览器发送异步请求)
强缓存及协商缓存 推荐文章www.toutiao.com/article/704…
HTTP及TCP推荐文章：juejin.cn/post/684490…
4.HTTP状态码
1xx 表示HTTP请求已经接受，继续处理请求
2xx 表示HTTP请求已经处理完成(200)
3xx 表示把请求访问的URL重定向到其他目录(304资源没有发生变化，会重定向到本地资源)
4xx 表示客户端出现错误(403禁止访问、404资源不存在)
5xx 表示服务端出现错误
5.meta 标签有哪些常用用法？
如果设置 name 属性，则它描述的是网页文档的信息（例如：作者、⽇期和时间、⽹⻚描述、 关键词）
如果设置 http-equiv 属性，则它描述的相当于是 HTTP 响应头信息（例如：网页内容信息, 网页缓存等）
1. 设置网页关键词 (SEO)
<meta name="keywords" content="电商,好货,便宜">
2. 设置网页视口（viewport）控制视⼝的⼤⼩、缩放和⽐例等 (移动端开发)
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
3. 设置 http 响应头：Content-Type 网页内容类型 (字符集)
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<!-- 设置字符集可简写为 -->
<meta charset="utf-8">
6.前端web存储的方式
1. localStorage 5M (用户不删, 一直都在)
2. sessionStorage 5M (关闭浏览器, 会自动销毁)
3. cookie 4k (可以设置过期时间) 缺点: 太小, 操作不方便 插件: js-cookie
4. IndexedDB 适合于存储大量的数据 (大小 >= 250M, 且甚至没有上限) ,异步操作 (性能好)
二. CSS面试题
1. 盒模型介绍
CSS3中的盒模型有以下两种：标准盒模型，IE(替代)盒模型
两种盒子模型都是由`content+padding+border+margin`构成，其大小都是
由`content+padding+border`决定的，但是盒子内宽度/高度(即`width/height`)的计算范围根据盒模型的不同
会有所不同：
标准盒模型：只包含`content`
IE(替代)盒模型：`content+padding+border`
可通过`box-sizing`来改变元素的盒模型
`box-sizing:content-box:`标准盒模型(默认值)
`box-sizing:border-box:IE`(替代)盒模型
事例：很多`UI`比如`bootstrap`就是用的IE盒模型，其实原因也比较简单，因为栅格一般是通过百分比实现的，比如
三栏就是控制每一栏的宽度为33.33%，而栅格还支持间距也就是`padding`， 如果用标准盒模型，实现起来就很麻
烦，因为这个`padding`会让每一栏的宽度超过33%
div {
width: 200px;
height: 200px;
padding: 20px;
border: 5px solid #000;
background-color: pink;
box-sizing: border-box;
}
<div></div>
div {
width: 200px;
height: 200px;
padding: 20px;
border: 5px solid #000;
background-color: pink;
}
<div></div>
2.常见的css选择器和优先级
(1) css选择器
通配符选择器
*{
margin:0;
padding:0;
}
元素（标签）选择器
div{
width:30px
}
类选择器
.box{
width:30px
}
##### ID选择器
#box{
width:30px
}
(2) 优先级
!important>行内样式>ID选择器>类、伪类、属性>元素、伪元素>继承>通配符
注：下面的css权重, 会高于上面的css权重
3.重排(reflow)和重绘(repaint)的理解
(1)概念
重排：
无论什么方式影响了元素的几何信息(元素在视口内的位置和尺寸大小)，浏览器需要重新计算元素在视口内的集合属性，这个过程叫做重排
重绘：
通过构造渲染树和重排(回流)阶段，我们知道哪些元素是可见的，以及可见节点的样式和具体几何信息(元素在视口内的位置和尺寸大小)，接下来就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个阶段叫做重绘
(2)如何减少重绘和重排？
最小化重排和重绘
比如样式集中改变，改变静态样式使用添加新样式类名.class或动态样式使用cssText属性，而不是为每一个微小的变化都去修改元素及其样式属性
批量操作DOM
1.使用` documentFragment` 保存临时更改(创建一个新的空白的文档片段;意义：文档片段存在与内存中，并不在
` DOM`树种，将子元素插入到文档片段时不会引起页面回流)
2.克隆你要更新的节点，处理副本，然后用更新的克隆交换原始节点
3.使用 `display: none` 来隐藏`dom`元素（1 次重排，重绘），添加 100 处更改，恢复显示`display: block`（1次
重排，重绘）。这样你就可以用 2 次回流换取 100 次的修改了
不要多次请求读写dom的style信息
可以批量读`dom`的`style`信息然后保存下来，并且之后使用这一块备份
尽可能避免元素重排重绘影响其他更多的节点
例如，使用绝对定位使该元素成为渲染树中主体的子元素，因此当您为其设置动画时，它不会影响太多其他节点。当
您将元素放在它们上面时，其他一些节点可能位于需要重新绘制的区域，但它们不需要重绘。
4.BFC
BFC即块级格式上下文，根据盒模型可知，每个元素都被定义为一个矩形盒子，然而盒子的布局会受到尺寸，定位，盒子的子元素或兄弟元素，视口的尺寸等因素决定，所以这里有一个浏览器计算的过程，计算的规则就是由一个叫做视觉格式化模型所定义的，BFC就是来自这个概念，它是CSS视觉渲染的一部分，用于决定块级盒子的布局及浮动相互影响范围的一个区域
(1) BFC具有一些特性：
1. 块级元素会在垂直方向一个接一个的排列，和文档流的排列方式一致
2. 在BFC中上下相邻的两个容器的`margin`会重叠，创建新的BFC可以避免外边距重叠
3. 计算BFC的高度时，需要计算浮动元素的高度
4. BFC区域不会与浮动的容器发生重叠
5. BFC是独立的容器，容器内部元素不会影响外部元素
6. 每个元素的左`margin`值和容器的左`border`相接触
(2) 利用这些特性，我们可以解决以下问题
利用`2`，我们可以避免`margin`重叠问题
利用`3`，我们可以避免高度塌陷
利用`4`和`6`可以解决三档(或两档)自适应布局(左侧右侧盒子定位中间盒子自适应)
推荐文章：可能是最好的 BFC 解析了...
5.flex布局
基本概念
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的侧轴（cross axis），项目默认沿主轴排列。
容器属性
flex-direction 属性决定主轴的方向（即项目的排列方向）
flex-wrap 超出部分是否允许换行(默认不允许)
flex-flow `flex-direction`属性和`flex-wrap`属性的简写形式
justify-content 项目在主轴上的对齐方式
align-items 项目在侧轴上如何对齐
align-content 多根轴线的对齐方式
项目属性
`order` 定义项目的排列顺序，数值越小，排列越靠前，默认为0
`flex-grow` 属性定义项目的放大比例，默认为`0`，即如果存在剩余空间，也不放大。
`flex-shrink` 项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
`flex-basis` 在分配多余空间之前，项目占据的主轴空间
`flex` 是`flex-grow`, `flex-shrink` 和 `flex-basis`的简写，默认值为`0 1 auto`。后两个属性可选
`align-self` 允许单个项目有与其他项目不一样的对齐方式，可覆盖`align-items`属性。默认值为`auto`，表示继承父元素的`align-items`属性，如果没有父元素，则等同于`stretch`
注：flex：1包含flex-grow: 1，flex-shrink: 1，flex-basis: 0%操作
6.line-height如何继承？
-
1.若父元素行高有具体数值，则子元素直接继承该值
-
2.若父元素行高为比例形式，则子元素继承该比例（自身
font-size比例） -
3.若父元素行高为百分比形式，则子元素继承计算出来的值（父元素
font-size父元素行高百分数）
7.通过 CSS 的哪些方式可以实现隐藏页面上的元素？
opacity: 0
通过将元素的透明度设置为0，实现看起来隐藏的效果；但是依然会占用空间并可以进行交互
visibility: hidden
与透明度为0的方案非常类似，会占据空间，但不可以进行交互
overflow: hidden
只会隐藏元素溢出的部分；占据空间且不可交互
display: none
可以彻底隐藏元素并从文档流中消失，不占据空间也不能交互，且不影响布局
z-index: -9999
通过将元素的层级置于最底层，让其他元素覆盖住它，达到看起来隐藏的效果
transform:scale(0,0)
通过将元素进行缩放，缩小为0；依然会占据空间，但不可交互
left: -9999px
通过将元素定位到屏幕外面，达到看起来看不到的效果
8.px、em、rem之间有什么区别
px: 绝对单位
em: 相对单位, 相对于父盒子的font-size
rem: 相对单位, 相对于html根标签
=> rem 一般可以用于 rem适配
=> rem 适配的原理?
1. 使用 rem 作为单位 (转换问题 => 利用webpack插件, 写px自动转rem)
width: 10rem;
2. 动态的设置不同屏幕下的 html font-size (媒体查询, js设置 (插件 => flexible.js))
360px 屏幕中, html { font-size: 36px; } 盒子大小360
480px 屏幕中, html { font-size: 48px; } 盒子大小480
<style>
html {
font-size: 20px;
}
.father {
width: 400px;
height: 300px;
background-color: pink;
border: 1px solid #000;
margin-bottom: 10px;
font-size: 30px;
}
.box1, .box2, .box3 {
width: 100%;
height: 150px;
background-color: skyblue;
}
.box1 {
font-size: 40px;
}
.box2 {
font-size: 2em;
}
.box3 {
font-size: 3rem;
}
</style>
<div class="father">
<div class="box1">嘎嘎</div>//40px
</div>
<div class="father">
<div class="box2">嘿嘿</div>//60px
</div>
<div class="father">
<div class="box3">吼吼</div>//60px
</div>
效果：
9.你在使用z-index时遇到过什么坑嘛
<style>
.father {
width: 100%;
height: 200px;
position: relative;
background-color: skyblue;
z-index: 1;
}
.son {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
left: 0;
top: 0;
z-index: 999;
}
.box2 {
position: absolute;
width: 100px;
height: 100px;
background-color: blue;
left: 0;
top: 0;
z-index: 100;
}
</style>
</head>
<body>
<!-- z-index的小坑: 如果父辈元素有定位, 且有z-index, 优先按照父辈元素进行比较 -->
<!-- z-index: 1 -->
<div class="father">
<!-- 子绝父相的盒子 -->
<div class="son"></div>
</div>
<!-- z-index: 100 -->
<div class="box2"></div>
</body>
10.如何清除浮动
清除浮动: 清除浮动造成的影响, 浮动脱离标准流, 不占位置 (父盒子不会被撑开)
解决方案:
1. 定高法 (写死了)
2. 添加一个子盒子, clear: both;
3. overflow: hidden; 溢出隐藏, 触发了BFC, 解决了浮动的影响
4. 利用伪元素法 clearfix
<div class="father clearfix">
<div class="son"></div>
</div>
双伪元素
.clearfix::before,
.clearfix::after {
content: '';
display: table;
}
.clearfix::after {
clear: both;
}
单伪元素
.clearfix::after {
content: '';
display: block;
clear: both;
/在网页中看不到伪元素/
height: 0;
visibility: hidden;
}
11.讲一下精灵图
优化小图片加载的技术, 将多张小图片, 合成一张使用，可减少文件体积
.one {
background: url('./sprite.png') 0px 0px;
}
.two {
background: url('./sprite.png') 0px -44px;
}
12 响应式适配的核心(媒体查询)
媒体查询 (不会增加任何的权重, 一般放下面)
1. width: xxx 固定值
2. max-width: 样式生效的最大宽度 <= 这个宽, 样式生效
3. min-width: 样式生效的最小宽度 >= 这个宽, 样式生效
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 100%;
background-color: pink;
height: 500px;
margin: 0 auto;
}
@media screen and (min-width: 1200px) {
.box {
width: 1170px;
background-color: rgb(64, 41, 168);
}
}
/* 992 <= x < 1200 */
@media screen and (min-width: 992px) and (max-width: 1199px) {
.box {
width: 980px;
background-color: rgb(231, 18, 53);
}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
.box {
width: 750px;
background-color: rgb(19, 230, 64);
}
}
@media screen and (max-width: 767px) {
.box {
width: 100%;
background-color: rgb(231, 247, 6);
}
}
<!-- box在不同屏幕范围有不同的宽度
1. 1200以上, 宽度1170px
2. 992以上, 宽度980px
3. 768以上, 宽度750px
4. 768以内, 宽度100%
-->
</style>
</head>
<body>
<div class="box"></div>
</body>
13 说说伪类和伪元素的区别？
什么是伪类？
伪类（pseudo-class）是以冒号 : 为前缀，可被添加到⼀个选择器的末尾的关键字。
它用于让样式在元素的特定状态下才被应用到实际的元素上。比如： :checked 、 :hover 、 :disabled 、 :first- child 等。
:hover
:nth-child(1)
注意: 伪类, 虽然是写法比较特殊, css选择器的权重, 和类一致的
什么是伪元素？
:before / :after
伪元素⽤于创建⼀些并不在 DOM 树中的元素，并为其添加样式。伪元素的语法和伪类类似，可以一个冒号或两个冒
号为前缀。
⽐如，可以通过 :before 、 :after 来在⼀个元素前、后增加⼀些额外的⽂本并为它们添加样式；
并且，虽然⽤户可以看到这些⽂本，但其实它们并不在 DOM 树中。(坑: 伪元素是无法注册事件的, 所以不要通过js控
制伪元素)
两者的区别
虽然它们在语法上是一致的，但是它们的功能区别还是非常明显的。
伪类是用来匹配元素的特殊状态的
伪元素是用来匹配元素的隶属元素的，这些隶属元素可以在界面中展示，但在 DOM 中不体现
