墨痕的前端知识体系

# 常见面试题

# HTML试题

# doctype的作用是什么？

DOCTYPE是html5标准网页声明，且必须声明在HTML文档的第一行。来告知浏览器的解析器用什么文档标准解析这个文档。

如果删除调这个标签，则代表以 怪异模式 渲染页面，它所识别的语法向前靠拢，尽量兼容以前的版本,否则就是 标准模式

document.compatMode = 'CSS1Compat' // 标准模式
document.compatMode = 'BackCompat' //怪异模式

# 你对HTML语义化的理解？

语义化是指使用恰当语义的html标签，让页面具有良好的结构与含义，比如<p>标签就代表段落，<article>代表正文内容,<header> <nav> <aside> <footer>等。

优点:

  1. 增强开发维护可读性
  2. 更适合机器解析SEO，生成目录,搜索引擎爬虫等

# HTML5 的新特性

# src和href的区别？

  • src指向的内容会嵌入到标签的位置,会将指定的src资源下载并嵌入到文档。浏览器渲染页面会等待src解析并执行

  • href 一般用于超链接,如果是指向资源文件会下载资源,浏览器不会因他停止渲染

# 有哪些常用的meta标签？

  • charset，用于描述HTML文档的编码形式
  • http-equiv，顾名思义，相当于http的文件头作用,比如下面的代码就可以设置http的缓存过期日期
＜meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00 GMT"＞
  • viewport，移动前端最熟悉不过，Web开发人员可以控制视口的大小和比例

# script标签中defer和async的区别？

  • defer: 浏览器指示脚本在文档加载完成之后再执行，script在异步加载完成之后并不会立即执行。需要等待文档解析完成
  • async: 同样是异步加载脚本，但是加载完成之后立即执行，所以async属性的脚本是乱序的，具有前后依赖关系的脚本并不适用

# html 标签 b 和 strong 的区别

<b> 这个标签对应 bold，即文本加粗，其目的仅仅是为了加粗显示文本，是一种样式／风格需求； <strong> 这个标签意思是加强，表示该文本比较重要，提醒读者／终端注意。为了达到这个目的，浏览器等终端将其加粗显示；

总结：<b>为了加粗而加粗，<strong>为了标明重点而加粗。

# CSS3 新特性

伪类和伪元素选择器：

:first-child, :last-child, :nth-child(1), :link, :visited, :hover, :active ::before, ::after, :first-letter, :first-line, ::selection

背景、边框和颜色透明度：

background-size, background-origin, border-radius box-shadow, border-image rgba

文字效果：

text-shadow, word-wrap

2D 转换和 3D 转换：

transform, translate(), rotate(), scale(), skew(), matrix() rotateX(), rotateY(), perspective

动画、过渡：

animation, transition

多列：

column-count, column-gap, column-rule

用户界面：

resize, box-sizing, outline-offset

# margin、padding和translate百分比是按照什么计算的

  1. margin和padding ：父盒宽度
  2. translate：本身的宽高

# CSS有几种定位方式？

  • static: 正常文档流定位，此时 top, right, bottom, left 和 z-index 属性无效

  • relative：相对定位，此时的『相对』是相对于正常文档流的位置。

  • absolute：相对于最近的非 static 定位祖先元素的偏移，来确定元素位置，

  • fixed：指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变

  • sticky：粘性定位，特性近似于relative和fixed的合体

# CSS 选择器的解析规则

从右往左

# CSS 选择器优先级

特别注意一下伪类和伪元素

选择器按优先级先后排列：!important >内联>id>class = 属性 = 伪类 >标签 = 伪元素 > 通配符 * ,如果相同的权重则后者覆盖前者，其实只需要记住 class:10即可，类推

# CSS 中哪些属性可以继承

一般具有继承性的属性：

  • 字体相关的属性，font-size 和 font-weight等
  • 文本相关的属性，color 和 text-align等
  • 表格的一些布局属性
  • 列表属性如 list-style 等
  • 还有光标属性 cursor
  • 元素可见性 visibility

当一个属性不是继承属性的时候，我们也可以通过将它的值设置为 inherit 来使它从父元素那获取同名的属性值来继承。

# 脱离文档流的方式

  • float
  • position: absolute
  • position: fixed

# display 有哪些值？说明他们的作用

  • block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
  • none 元素不显示，并从文档流中移除。
  • inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
  • inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。
  • list-item 像块类型元素一样显示，并添加样式列表标记。
  • table 此元素会作为块级表格来显示。
  • inherit 规定应该从父元素继承display属性的值。

# 有哪些方式（CSS）可以隐藏页面元素？

  • 使用 display:none;隐藏元素，渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。

  • 使用 visibility:hidden;隐藏元素。元素在页面中仍占据空间，但是不会响应绑定的监听事件。

  • 使用 opacity:0;将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件(只有这一种隐藏方式会响应事件)。

  • 通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。

  • 通过 z-index 负值，来使其他元素遮盖住该元素，以此来实现隐藏。

  • 通过 clip/clip-path 元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

  • 通过 transform:scale(0,0)来将元素缩放为 0，以此来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

# visibility: hidden, opacity: 0，display: none

  • opacity: 0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如 click 事件，那么点击该区域，也能触发点击事件的；

  • visibility: hidden，该元素隐藏起来了，但不会改变页面布局，不会触发该元素已经绑定的事件；

  • display: none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样。

# link和@import的区别？

  • link 是XHTML提供的元素而@import是CSS提供的

  • link 和页面一起加载, @import需要等待页面加载完成执行

  • link 方式的样式权重高于@import的权重

# em\px\rem区别？

  • em : 相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px）

  • px : 绝对单位，页面按精确像素展示

  • rem :相对单位，可理解为”root em”, 相对根节点html的字体大小来计算

# 伪类和伪元素的区别

  • 伪类用于当已有的元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的 元素时，我们可以通过:hover来描述这个元素的状态。

  • 伪元素用于创建一些不在文档树中的元素，并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说，我们可以通过::be fore来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

# 行内元素和块级元素有什么区别

  1. 视觉上行内元素排排一行，块级元素独占一行，垂直排列

  2. 块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它行内元素。

  3. 行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

# 块级元素水平居中,垂直居中,水平垂直居中

水平居中:

  1. text-align
  2. margin: 0 auto但是一定要给宽度
  3. 绝对定位+margin或transform 4. flex布局

垂直居中:

  1. height和line-height相等
  2. display:table-cell;vertical-align:middle
  3. 绝对定位 + margin或transform
  4. flex布局

水平垂直居中:

  1. 父级设置text-align: center和line-height等同高度
  2. 绝对定位 + margin或transform
  3. 父级设置display: table，子节点设置display:table-cell;text-align:center;vertical-align:middle
  4. flex布局

# 清除浮动有哪些方法？

  • 空div方法：在需要清除浮动的元素后面添加一个空白标签<div style="clear:both;"></div>
  • 父级元素添加overflow: auto或overflow: hidden方法，使用BFC
  • 伪元素清除浮动，最好的方法
.parent-box:after{
    clear: both;
    content: '';
    display: block;
}
  • 父元素设置display: table

# 清除浮动的原理

  • clear属性清除浮动：clear 属性规定元素盒子的边不能和浮动元素相邻。该属性只能影响使用清除的元素本身。
  • 触发 BFC

# BFC是什么吗 怎么触发BFC

块级格式上下文，一句话来说就是让块级元素有块级元素该有的样子，触发BFC可以清除浮动、让margin不重叠。

触发条件:

  1. overflow的值不为visible
  2. display的值为table-cell、table-caption和inline-block之一。
  3. position的值不为static或relative中的任何一个
  4. float不为 none

# 盒模型的理解

标准盒(content-box): 设置的宽高只是包括内容区。

因为content 的 width 即宽度，所以元素的宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

IE盒(border-box):设置的宽高包含了内边距和边框。

因为content 的 width 即 border-left+padding-left+width+padding-right+border-right，所以元素的宽度 = margin-left + width + margin-right

# 什么情况下css会使用gpu加速

# svg和canvas的概念和区别

  • canvas与svg都是可以在浏览器上创建图形 HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像、动画的方法

  • canvas绘制位图,绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改。canvas复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）。canvas输出的是一整幅画布，就像一张图片一样，放大会失真。canvas不适合游戏应用。

  • svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失。svg最适合图像密集型的游戏，其中的许多对象会被频繁重绘

# 视差屏原理

# 如何理解z-index

CSS 中的z-index属性控制重叠元素的垂直叠加顺序，默认元素的z-index为0，我们可以修改z-index来控制元素的图层位置，而且z-index只能影响设置了position值的元素。

  • 顶部: 最接近观察者
  • ...
  • 3 层
  • 2 层
  • 1 层
  • 0 层 默认层
  • -1 层
  • -2 层
  • -3 层
  • ...
  • 底层: 距离观察者最远

# 如何理解层叠上下文 怎么触发

# 什么是CSS 预处理器？大家为什么要使用他们？

预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。

优点:

  1. 结构清晰，便于扩展。
  2. 使用方便，扩展了层级、mixin、变量、循环、函数等
  3. 加强 css代码的复用性

# 移动端1px问题

  1. 媒体查询: IOS8下已经支持带小数的px值, media query对应devicePixelRatio有个查询值-webkit-min-device-pixel-ratio
.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border { border: 0.333333px solid #999 }
}
  1. 设置 border-image 方案
.border-image-1px {
  border: 1px solid transparent;
  border-image: url('./../../image/96.jpg') 2 repeat;
}
  1. box-shadow 方案
div {
  box-shadow: 0  -1px 1px -1px #e5e5e5,   //上边线
            1px  0  1px -1px #e5e5e5,   //右边线
            0  1px  1px -1px #e5e5e5,   //下边线
            -1px 0  1px -1px #e5e5e5;   //左边线

}
  1. 伪类元素实现

一条border

.setOnePx{
  position: relative;
  &::after{
    position: absolute;
    content: '';
    background-color: #e5e5e5;
    display: block;
    width: 100%;
    height: 1px; /*no*/
    /* y方向缩小0.5倍 */
    transform: scale(1, 0.5);
    /* 对齐左上角 */
    top: 0;
    left: 0;
  }
}

四条border

.setBorderAll{
  position: relative;
    &:after{
      content:" ";
      position:absolute;
      top: 0;
      left: 0;
      width: 200%;
      height: 200%;
      transform: scale(0.5);
      /* 同样为伪元素设置绝对定位，并且和父元素左上角对其。将伪元素的长和宽先放大2倍，然后再设置一个边框，以左上角为中心，缩放到原来的0.5倍 */
      transform-origin: left top;
      box-sizing: border-box;
      border: 1px solid #E5E5E5;
      border-radius: 4px;
  }
    }

# 浏览器是怎样解析CSS选择器的？

CSS选择器的解析是从右向左解析的，为了避免对所有元素进行遍历。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历

# requestAnimationFrame()

# flex用法总结

父项常用属性

  • flex-direction：设置主轴的方向

row(横向排列) column(纵向) row-erverse(横向颠倒) column-reverse(列颠倒)

  • flex-wrap：设置子元素是否换行

warp no-wrap

  • justify-content：设置主轴上的子元素排列方式

    • flex-start
    • center
    • flex-end
    • space-between 平均分布(两端对齐)
    • space-around 等距离分布 (每个item两侧距离均相等)

  • align-items：设置交叉轴上的子元素排列方式（单行）

    • flex-start
    • center
    • flex-end
    • stretch (在没有设置元素高度时,高度会撑满整个容器)
    • base-line (对齐元素文字的基线)

  • align-content：设置侧轴上的子元素的排列方式（多行）,多行可设置 space-between 和 space-around

  • flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

子项常见属性

flex(复合属性): 默认: flex: 0 1 auto;

  • flex-grow: 默认为0，决定元素在剩余空间内的放大倍数，例如flex:1 在剩余空间
  • flex-shrink: 默认为1，属性定义了项目的缩小比例，即如果空间不足，该项目将缩小。
  • flex-basis: 用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会width属性高，因此会覆盖widtn属性。

# 简单介绍使用图片 base64 编码的优点和缺点

base64编码是一种图片处理格式，通过特定的算法将图片编码成一长串字符串，在页面上显示的时候，可以用该字符串来代替图片的url属性。

优点:

  • 减少一个图片的HTTP请求

缺点:

  • 不仅会造成文件体积的增加，影响文件的加载速度，还会增加浏览器对html或css文件解析渲染的时间。

  • 使用base64无法直接缓存，要缓存只能缓存包含base64的文件

  • 兼容性的问题，ie8以前的浏览器不支持。

# 如果需要手动写动画，你认为最小时间间隔是多久，为什么

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60*1000ms＝16.7ms

# 阐述一下 CSSSprites

将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS background-image，background-repeat，background-position的组合进行背景定位。利用CSSSprites能很好地减少网页的http请求，从而很好的提高页面的性能；CSSSprites能减少图片的字节。

优点：

  • 减少HTTP请求数，极大地提高页面加载速度
  • 增加图片信息重复度，提高压缩比，减少图片大小
  • 更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现

缺点：

  • 图片合并麻烦
  • 维护麻烦，修改一个图片可能需要重新布局整个图片，样式

# transition 和 animation 的区别

  • transition关注的是CSSproperty的变化，property值和时间的关系是一个三次贝塞尔曲线。

  • animation作用于元素本身而不是样式属性，可以使用关键帧的概念，应该说可以实现更自由的动画效果。

# CSS 实现隔行变色

/* 方法一 */
li:nth-child(odd) {background:#ff0000;}
li:nth-child(even) {background:#0000ff;}

/* 方法二 */
li:nth-of-type(odd) { background:#00ccff;} /* 奇数行 */
li:nth-of-type(even) { background:#ffcc00;} /* 偶数行 */

# iPhone 里面 Safari 上如果一个输入框 fixed 绝对定位在底部，当软键盘弹出的时候会有什么问题，如何解决

方案就是：在软键盘弹起后，直接把fixed的元素变成absolute的，不需要浏览器自己去做处理，待键盘收起后再恢复成fixed。

document.body.addEventListener('focusin', () => {
    //软键盘弹出的事件处理
    let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    //注只针对ios 、处在滚动中位置时
    isIphone() && scrollTop > 0 && this.setState({ className: 'postion-absolute' })
})
document.body.addEventListener('focusout', () => {
      //软键盘收起的事件处理
     isIphone() && this.setState({ className: '' })
})

# Css inherit、initial、unset 三者的区别

  • initial:初始化到该属性浏览器默认定义 的值。
  • inherit(继承): 继承
所有元素可继承：visibility 和 cursor
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction
块状元素可继承：text-indent和text-align
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image
表格元素可继承：border-collapse
  • unset:
    • 如果该属性是默认继承属性，该值等同于inherit
    • 如果该属性是非继承属性，该值等同于initial -换句话说这个unset关键字会优先用inherit的样式，其次会应该用initial的样式。

# 居中为什么要使用 transform（为什么不使用 marginLeft/marginTop）

  • transform: 不会引起整个页面的回流重排
  • marginLeft: margin可以控制元素的位置，也就是说，改变margin，就会改变render tree的结构，必定会引起页面layout回流和repaint重绘。

# 介绍下position:sticky

position:sticky是一个新的css3属性，它的表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。

例如吸顶导航的实现

# 常见的兼容性问题？

  1. 不同浏览器的标签默认的margin和padding不一样。解决办法是加一个全局的 *{margin:0;padding:0;} 来统一；

  2. 设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。解决方案: 给超出高度的标签设置overflow:hidden;或者设置行高 line-height 小于你设置的高度。

  3. Firefox下，只能使用getAttribute()获取自定义属性。

  4. Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

  5. 超链接访问过后hover样式就不出现了，因为被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A :

a:link {} 
a:visited {} 
a:hover {} 
a:active {}
  1. png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
Last update: 2/28/2021, 11:41:18 PM

← 浅析 vue-router 源码和动态路由权限分配 →