HTML笔记
标签分类# HTML笔记
标签分类
html5语言化标签
html5存储
二进制
WebScoket
CSS笔记
DOM选择器
- 标签选择器（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.这个回调函数需要等到插入异步队列时前面的异步函数都执行完了，才会执行
html5语言化标签
html5存储
二进制
WebScoket
CSS笔记
DOM选择器
-
标签选择器（Tag Selector）
p { color: red; } -
类选择器（Class Selector）
.example { color: blue; } -
ID 选择器（ID Selector）
#main { color: green; } -
通配符选择器（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.这个回调函数需要等到插入异步队列时前面的异步函数都执行完了，才会执行
