前端语言串讲｜ 青训营

HTML笔记

标签分类

html5语言化标签

html5存储

二进制

WebScoket

CSS笔记

DOM选择器

1. 标签选择器（Tag Selector）

p {
  color: red;
}

2. 类选择器（Class Selector）

.example {
  color: blue;
}

3. ID 选择器（ID Selector）

#main {
  color: green;
}

4. 通配符选择器（Universal Selector）

* {
  border: 1px solid red;
}

1.你了解过z-index，简单介绍下：

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：z-index 仅能在定位元素上奏效！
可能用到值：
auto——默认。堆叠顺序与父元素相等。
number——设置元素的堆叠顺序。
inherit——规定应该从父元素继承 z-index 属性的值。
适用的元素：
必须在定位元素（position:relative/absolute/fixed/sticky）上才有效
所以z-index是一种依赖属性，依赖position属性。

2. 你了解过BFC机制吗，简单介绍下：

（1）概念：

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

（2）建立方式：

1.开启浮动：浮动元素 float ＝ left | right 或 inherit（≠ none）；
2.绝对定位元素 position ＝ absolute 或 fixed；
3.设置display ＝ inline-block | flex | inline-flex | table-cell 或 table-caption
4.设置overflow ＝ hidden | auto 或 scroll (≠ visible)

(3)作用：

1.解决高度塌陷问题：
子类用float，父类高度塌陷，父类用overflow: hidden，塌陷解决
2.解决和父类的外边距重叠：

3. 你了解或遇到过高度塌陷问题吗，说下你对此的认知，解决方法：

（1）父类定义：overflow: hidden
（2）使用after伪类解决高度塌陷问题

4.说下你了解过的定位方式，并简单介绍其使用方法，效果：

1.静态定位-static

静态定位是css中的默认定位方式，也就是没有定位。在此定位方式中设置：top，bottom，left，right，z-index 这些属性都是无效的。

2.相对定位-relative

相对定位的特点就是元素本身在文档流中的占位不变，但显示效果相对于它原本的位置发生了改变，它的替身在参照本体进行移动。

3.绝对定位-absolute（重点问）

以父级为参照进行定位，如果所有父级都没有设置相对定位，那么它将根据根元素html进行偏移。

4.固定定位-fixed

固定定位比较简单，固定定位是参照浏览器窗口的左上角进行偏移。固定定位的特点就是：无论如何滑动页面，固定定位的元素位置都不会被改变，完全脱离文档流。另外，如果设置了固定定位的元素也设置了width或height的百分比值，那么此百分比的值是参照窗口宽高来计算的。

5.粘性定位-sticky

sticky粘性定位，这个定位属性是【position：sticky；】，需要至少设置【top、left、right、bottom】四个属性之一，否则不生效。sticky粘性定位，可以看作是：【static静态定位】和【fixed固定定位】的结合体，最开始默认是static静态定位，当相对于父元素满足定位条件的时候，sticky粘性定位就会由static静态定位转变为fixed固定定位。

5.说下你了解过的让一个盒子水平垂直居中的方法：

方法一：利用文本水平居中text-align: center和行高line-height进行实现
可以先通过display将子盒子转换为行内块显示模式，然后利用文本水平居中和行高获得最终子盒子的水平和垂直居中。由于对齐方式的不同，需要给子盒子添加vertical-align: middle;
如：

方法二：利用子绝父相和外边距margin实现
先为父盒子设置相对定位，再为子盒子设置绝对定位，且绝对定位的四个方向的位移都设为0，然后将外边距margin属性值设置为auto即可。

方法三：利用子绝父相和左、上外边距实现
先为父盒子设置相对定位，再为子盒子设置绝对定位，且将子盒子分别向右、向下移动父盒子的一半，然后利用外边距margin将子盒子分别向左、向上移动子盒子的一半。

方法四：利用子绝父相和位移实现
先为父盒子设置相对定位，再为子盒子设置绝对定位，且将子盒子分别向右、向下移动父盒子的一半，然后利用位移transform: translate;将子盒子分别向左、向上移动子盒子的一半。

方法五：利用flex布局实现
首先在父元素中添加display:flex;使其显示模式为flex布局模式，然后在父元素中添加主轴居中和侧轴居中即可。

js笔记

事件机制

事件循环节制

执行流程事件的执行顺序，是先执行宏任务，然后执行微任务，这个是基础，任务可以有同步任务和异步任务，同步的进入主线程，异步的进入Event Table并注册函数，异步事件完成后，会将回调函数放入Event Queue中(宏任务和微任务是不同的Event Queue)，同步任务执行完成后，会从Event Queue中读取事件放入主线程执行，回调函数中可能还会包含不同的任务，因此会循环执行上述操作。**注意：**setTimeOut并不是直接的把你的回掉函数放进上述的异步队列中去，而是在定时器的时间到了之后，把回掉函数放到执行异步队列中去。如果此时这个队列已经有很多任务了，那就排在他们的后面。这也就解释了为什么setTimeOut为什么不能精准的执行的问题了。setTimeOut执行需要满足两个条件：1.主进程必须是空闲的状态，如果到时间了，主进程不空闲也不会执行你的回调函数2.这个回调函数需要等到插入异步队列时前面的异步函数都执行完了，才会执行