MarkDown语法

  • 表示小黑圆点，使用-加空格

  • &#124加；表示|

  • 1加: 表示之前或之后某个地方的注释(1那个地方可使用数字或单词)

    • 1. 下方的引入样式 ↩

  • 要删除某行文字 在其前面加波浪号~~

  • 如下的任务列表，为破折号-加[ ]，若完成，则在[]中填写x，否则写空格

  • [x] I want to be healthy

  • [ ] I want to be a better programmer

  • :happy: 添加表情可以在📙 Emojipedia — 😃 Home of Emoji Meanings 💁👌🎍😍 查找 或者用冒号:加字母寻找 比如下面的star就是: star :（只不过没有空格） 或者win+句号

    :star: :fire:

SyntaxDescription
HeaderTitle
ParagraphText

  • 产生如上表格的方式：

    1
    2
    3
    4
    | Syntax      | Description |
    | ----------- | ----------- |
    | Header      | Title       |
    | Paragraph   | Text        |

最后，速查表：Markdown 语法速查表 | Markdown 官方教程

要学习的有关css的知识点

  • 引入方式:

    • 行内样式

    • 内部样式表

    • 外部样式表

  • 选择器

    • 通用选择器
    • 标签选择器
    • id选择器
    • class选择器
    • 属性选择器

    • 派生选择器

      • 后代选择器
      • 子元素选择器
      • 相邻兄弟选择器

    • 组合选择器

    • 伪选择器
    • 选择器优先级

  • 属性

    • 单位

      • px
      • em
      • rem
      • vw vh

    • 背景

    • 文本
    • 字体
    • 列表
    • 表格

  • 文档流

    • 标准流
    • 浮动流
    • 定位流

  • 内联元素/块状元素

  • 盒子模型

    • content
    • padding
    • border
    • margin

  • 浮动

    • 设置浮动float
    • 清除浮动clear

CSS

1. em和rem的区别：

分辨率=尺寸*密度

1px=分辨率*缩放因子

为了移动端更好的适配，引入em和rem

em和rem都是相对长度单位

  • em是根据父元素大小计算的，一般默认16px=1em
  • rem是根据根目录计算的

2.清除浮动

  • 使用clear属性，即clear:left或both等等

    • 为撑开但未完全撑开父级元素的（完全撑开的意思是指父盒子高度包括了浮动子盒子高度）文本元素或其他元素添加clear属性
    • 在父盒子的某个位置添加一个没有高度的块级元素，位置根据你想实现的效果来定，如果添加在最开始就不管用；添加在浮动元素和其他元素中间就会使浮动元素单独一行；添加在最后会撑开父盒子，但是文本元素会环绕在浮动元素周围
    • 为父盒子添加伪元素，在其中设置display=block; clear:both; 要点只有两个：块级元素+clear属性（但是不要忘记content）

  • 使用BFC

    • BFC的特点之一就是计算高度的时候会把内部浮动元素的高度也计算在内，所以能够实现BFC的就能够实现清除浮动，比如：

      1
      2
      1. overflow:auto;(除了visible都可以)
      2. display:inline-block;

3.BFC

Block Formatting Contexts 块级格式化上下文

:star:BFC的触发条件

  1. 根元素HTML
  2. 浮动元素 float: left | float: right
  3. 定位元素 position: absolute | position: fixed
  4. display 值为 inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、- - grid、inline-grid
  5. overflow 除了visible的其他值都可以，hidden、scroll、auto

:star:理解

1.内部的Box会在垂直方向上一个接一个的放置

2.内部的Box垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生折叠，不同BFC不会发生折叠。）

3.每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）

4.BFC的区域不会与float的元素区域重叠

5.计算BFC的高度时，浮动子元素也参与计算

  • 第2点解决margin重叠问题：为其中一个盒子设置BFC

  • 第4点的意思是，设置了BFC的元素，不会与浮动元素的区域重叠

4.IFC

Inline Formatting Contexts 内联格式化上下文

  • 水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。
  • 垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

vertical-align

vertical-align使用时，元素为 inline 水平元素或 table-cell 元素，所以例如 float 和 position: absolute ，一旦设置了这两个属性之一，元素的 display 值被忽略，强制当成 block 方式处理，因此，vertical-align 也就失去了作用。默认两个inline-block元素是基线对齐的

vertical-align与line-height有密不可分的关系，vertical-align的百分比就是根据line-height来计算的，下面根据vertical-align的属性值来分点讲

  • baseline

    :star:当一个inline-block盒子A中有inline-block元素时，A的基线为A中最后一个inline-block元素的基线；如果没有inline-block元素或者overflow不是visible时，其基线就是margin底边缘

    如果将盒子的行高设置为0，因为文字实际占据的高度是由行高决定的，当行高变为0时，文字高度的起始位置就变成了文字的垂直中心位置

  • top/bottom

    对于内联元素，指的是元素的顶部（底部）和当前行框盒子的顶部（底部）对齐；即与 line-box 的顶部（底部）对齐 对于 table-cell 元素，指的是元素的顶 padding 边缘和表格行的顶部对齐。

  • text-top/text-bottom

    text-top，指的是盒子的顶部和父级内容区域的顶部对齐，即与 content-area 顶部对齐。 text-bottom，指的是盒子的底部和父级内容区域的底部对齐，即与 content-area 底部部对齐。

  • sub/super

    super表示相对于基线上升，sub表示下降

  • 数值百分比类

    相对于line-height来说的

:star:vertical-align和line-height的重难点：

CSS深入理解vertical-align和line-height的基友关系 « 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com)

5. min-width

自己CSDN上写的https://blog.csdn.net/qwerty053/article/details/121667370?spm=1001.2014.3001.5501

6. 响应式设计

多栏布局

flex布局

网格布局

媒体查询 重要组件

通过媒体查询（Media queries），您可以根据各种设备特征和参数的值或者是否存在来调整您的网站或应用。

6.1 Grid布局

「中高级前端」干货！深度解析瀑布流布局 - 掘金 (juejin.cn)

除了常见的grid-row-start/grid-row/grid-template-rows/grid-gap等，还有以下几个：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*出现可能多出来的网格时的行宽列宽*/
grid-auto-rows: 1fr;
grid-auto-columns: 1fr;

/*尽可能填满表格*/
grid-auto-flow: row dense;

/*单元格的水平、垂直位置*/
justify-items: stretch;
/*align-items: end; */

/*整个内容在容器内的位置*/
justify-content: space-between;  
align-content: space-between;

6.2 flex布局

设置在容器上的属性：

  • justify-content：flex-start | flex-end | center | space-between | space-around
  • align-items ：flex-start | flex-end | center | baseline | stretch;
  • align-content (多根轴线)：flex-start | flex-end | center | space-between | space-around | stretch;
  • flex-flow
    • flex-direction：row | row-reverse | column | column-reverse;
    • flex-wrap：nowrap | wrap | wrap-reverse;

设置在项目上的属性：

  • flex（尽量使用flex，而不是分开的flex-grow等）
    • flex-grow
    • flex-shrink
    • flex-basis
  • order
  • align-self：auto | flex-start | flex-end | center | baseline | stretch;

javaScript

页面的回流、重绘

源自被删的前端游乐场

1. 如何理解前端和 Vue | 被删的前端游乐场 (godbasin.com)

前面也介绍了，浏览器绘制页面的过程是：1.计算CSS规则树 => 2.生成Render树 => 3.计算各个节点的大小/position/z-index => 4.绘制。其中计算的环节也是消耗较大的地方。

我们使用 DOM API 和 CSS API 的时候，通常会触发浏览器的两种操作：Repaint（重绘） 和 Reflow（回流）：

  • Repaint：页面部分重画，通常不涉及尺寸的改变，常见于颜色的变化。 这时候一般只触发绘制过程的第 4 个步骤。
  • Reflow：意味着节点需要重新计算和绘制，常见于尺寸的改变。 这时候会触发 3 和 4 两个步骤。
    在 Reflow 的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成 Reflow 后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为 Repaint。

回流的花销跟 render tree 有多少节点需要重新构建有关系，这也是为什么前面说使用innerHTML会导致更多的开销。所以到底是使用绑定映射表方式，还是使用直接替换内容方式，都是需要具体问题具体分析的。

虚拟DOM

虚拟 DOM 大概是这么个过程：
(1) 用 JS 对象模拟 DOM 树，得到一棵虚拟 DOM 树。
(2) 当页面数据变更时，生成新的虚拟 DOM 树，比较新旧两棵虚拟 DOM 树的差异。
(3) 把差异应用到真正的 DOM 树上。

八股文

应用无障碍

  1. img的alt属性在看不到图片时，能够被屏幕阅读器识别并阅读出来

  2. 语义化的意思是，标签名能准确地表达它所含内容的信息类型

    HTML5 引入了诸如 main、header、footer、nav、article、section 等大量新标签，仅标签名称就可以表示它所包含的信息类型，这给内容增加了语义含义

浏览器

  1. 浏览器的渲染原理简介 | 酷 壳 - CoolShell

  2. 浏览器输入url按下回车后发生了什么：

    总体来说分为以下几个过程：

    1. 输入地址。
    2. DNS解析。
    3. TCP连接。
    4. 发送http请求。
    5. 返回http响应。
    6. 浏览器解析渲染页面。
    7. 断开连接。

  3. TCP握手

    面试官，不要再问我三次握手和四次挥手 - 掘金 (juejin.cn)

    为什么是三次？

如客户端发出连接请求，但因连接请求报文丢失而未收到确认，于是客户端再重传一次连接请求。后来收到了确认，建立了连接。数据传输完毕后，就释放了连接，客户端共发出了两个连接请求报文段，其中第一个丢失，第二个到达了服务端，但是第一个丢失的报文段只是在某些网络结点长时间滞留了，延误到连接释放以后的某个时间才到达服务端，此时服务端误认为客户端又发出一次新的连接请求，于是就向客户端发出确认报文段，同意建立连接，不采用三次握手，只要服务端发出确认，就建立新的连接了，此时客户端忽略服务端发来的确认，也不发送数据，则服务端一致等待客户端发送数据，浪费资源。

第一次、第二次握手不可以携带数据，第三次可以

  1. DNS解析过程
    1. 查找浏览器缓存：因为浏览器一般会缓存DNS记录一段时间，不同浏览器的时间可能不一样，一般2-30分钟不等，浏览器去查找这些缓存，如果有缓存，直接返回IP，否则下一步。
    2. 查找系统缓存：浏览器缓存中找不到IP之后，浏览器会查看本地硬盘的 hosts 文件，看看其中有没有和这个域名对应的规则，如果有的话就直接使用 hosts 文件里面的 ip 地址。
    3. 如果在本地的 hosts 文件没有能够找到对应的 ip 地址，浏览器会发出一个 DNS请求到本地DNS服务器 。
    4. 查询你输入的网址的DNS请求到达本地DNS服务器之后，本地DNS服务器会首先查询它的缓存记录，如果缓存中有此条记录，就可以直接返回结果，此过程是递归的方式进行查询。如果没有，本地DNS服务器还要向DNS根服务器进行查询。
    5. 根DNS服务器没有记录具体的域名和IP地址的对应关系，而是告诉本地DNS服务器，你可以到域服务器上去继续查询，并给出域服务器的地址。这种过程是迭代的过程。
    6. 本地DNS服务器继续向域服务器发出请求，在这个例子中，请求的对象是.com域服务器。.com域服务器收到请求之后，也不会直接返回域名和IP地址的对应关系，而是告诉本地DNS服务器，你的域名的解析服务器的地址。
    7. 最后，本地DNS服务器向域名的解析服务器发出请求，这时就能收到一个域名和IP地址对应关系，本地DNS服务器不仅要把IP地址返回给用户电脑，还要把这个对应关系保存在缓存中，以备下次别的用户查询时，可以直接返回结果，加快网络访问。

  1. 浏览器解析渲染页面

    浏览器是一个边解析边渲染的过程。首先浏览器解析HTML文件构建DOM树，然后解析CSS文件构建渲染树，等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上。这个过程比较复杂，涉及到两个概念: reflow(回流)和repain(重绘)。DOM节点中的各个元素都是以盒模型的形式存在，这些都需要浏览器去计算其位置和大小等，这个过程称为reflow;当盒模型的位置,大小以及其他属性，如颜色,字体,等确定下来之后，浏览器便开始绘制内容，这个过程称为repain。页面在首次加载时必然会经历reflow和repain。reflow和repain过程是非常消耗性能的，尤其是在移动设备上，它会破坏用户体验，有时会造成页面卡顿。所以我们应该尽可能少的减少reflow和repain。

尽管Webkit与Gecko使用略微不同的术语，这个过程还是基本相同的，如下：

 　　1. 浏览器会将HTML解析成一个**DOM树**，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。
 　　2. 将CSS解析成 **CSS Rule Tree** 。
 　　3. 根据DOM树和CSSOM来构造 **Rendering Tree**。注意：Rendering Tree 渲染树并不等同于 DOM 树，因为一些像Header或display:none的东西就没必要放在渲染树中了。
 　　4. 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为layout，顾名思义就是计算出每个节点在屏幕中的位置。
 　　5. 再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。

tips

  • :star:const声明一个对象，其属性值是可以被更改的

  • :star:input失去焦点是blur,，获得焦点是focus

    checkbox 如何根据其是否被手动选中来进行一些响应事件呢？

    利用focus，如果被选中，就会执行fun函数

    1
    <input type="checkbox" @focus="fun">

  • :star:autofocus默认获得焦点