2021.3.6今日有在认真学习，但是心情也就一般，加油吧。
主流浏览器内核私有属性css前缀：
mozilla内核 (firefox,flock等) -moz
webkit内核(safari,chrome等) -webkit
opera内核(opera浏览器) -o
trident内核(ie浏览器) -ms
解析：a:link,a:visited,a:hover,a:active 分别是什么意思?
- link:连接平常的状态
- visited:连接被访问过之后
- hover:鼠标放到连接上的时候
- active:连接被按下的时候
正确顺序：“爱恨原则”（LoVe/HAte），即四种伪类的首字母:LVHA。再重复一遍正确的顺序：a:link、a:visited、a:hover、a:active .
因为当鼠标经过未访问的链接，会同时拥有a:link、a:hover两种属性，a:link离它最近，所以它优先满足a:link，而放弃a:hover的重复定义。当鼠标经过已经访问过的链接，会同时拥有a:visited、a:hover两种属性，a:visited离它最近，所以它优先满足a:visited，而放弃a:hover的重复定义。究其原因，是css的就近原则“惹的祸”。
滥用硬件加速会导致严重性能问题，因为它增加了内存使用，并且它会导致移动端电池寿命减少。
下列说法错误的是：
正确答案: C 你的答案: A (错误)
- 在Blink和WebKit的浏览器中，某个元素具有3D或透视变换 （perspective transform）的CSS属性，会让浏览器创建单独的图层。
- 我们平常会使用left和top属性来修改元素的位置，但left和top会触发重布局，取而代之的更好方法是使用translate，这个不会触发重布局。
- 移动端要想动画性能流畅，应该使用3D硬件加速，因此最好给页面中的元素尽量添加translate3d或者translateZ(0)来触发3D硬件加速。
- 解决浏览器渲染的性能问题时，首要目标就是要避免层的重绘和重排。
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
Margin
margin清除周围的元素（外边框）的区域。margin没有背景颜色，是完全透明的
Padding（填充）
当元素的 Padding（填充）（内边距）被清除时，所"释放"的区域将会受到元素背景颜色的填充。
margin之类的写法之间不能用都好来隔开，只能用空格。。。。。
rpx是微信小程序里面WXSS中的单位
通过使用 word-break normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。属性，可以让浏览器实现在任意位置的换行。
white-space 属性设置如何处理元素内的空白。
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。
一、无继承性的属性
1、display：规定元素应该生成的框的类型
2、文本属性：
vertical-align：垂直文本对齐
text-decoration：规定添加到文本的装饰
text-shadow：文本阴影效果
white-space：空白符的处理
unicode-bidi：设置文本的方向
3、盒子模型的属性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left
4、背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment
5、定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
6、生成内容属性：content、counter-reset、counter-increment
7、轮廓样式属性：outline-style、outline-width、outline-color、outline
8、页面样式属性：size、page-break-before、page-break-after
9、声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during
二、有继承性的属性
1、字体系列属性
font：组合字体
font-family：规定元素的字体系列
font-weight：设置字体的粗细
font-size：设置字体的尺寸
font-style：定义字体的风格
font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。
font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。
2、文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：增加或减少单词间的空白（即字间隔）
letter-spacing：增加或减少字符间的空白（字符间距）
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色
3、元素可见性：visibility
4、表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout
5、列表布局属性：list-style-type、list-style-image、list-style-position、list-style
6、生成内容属性：quotes
7、光标属性：cursor
8、页面样式属性：page、page-break-inside、windows、orphans
9、声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation
三、所有元素可以继承的属性
1、元素可见性：visibility
2、光标属性：cursor
四、内联元素可以继承的属性
1、字体系列属性
2、除text-indent、text-align之外的文本系列属性
五、块级元素可以继承的属性
1、text-indent、text-align
图片加载
A,减少对服务器请求------------------CSSSprite
B,体积小，矢量------------------SVGSprite
C,体积小，矢量，集成度高------------------Iconfont
D, 减少对服务器请求------------------Base64
:nth-child(n),n从1开始计数
:nth-child(odd)和:nth-child(even),从1开始计数
:nth-child(an+b),n从0开始计数
a标签不能套a标签，p标签不能套块标签
A：<h1> - <h6> 标签表示 HTML 标题，默认加粗
B：<caption> 标签表示表格标题，标题一般被居中表格之上，但不加粗文本
C：<em> 标签表示强调内容，显示为斜体，但不加粗文本
D：<th> 标签表示表格的表头，默认加粗文本
dp用于虚拟像素，在不同的像素密度的设备上会自动适配
align用于div，text-align用于文本
css引用方式：
外链样式
<link href="cc.css" type="text/css" rel="stylesheet" />
行内样式
<div style="border:solid 1px red;"></div>
内链样式
放在style中
getContext() 返回一个用于在画布上绘图的环境。
link标签是同时加载的 script标签才会加载完一个再加载另一个
加载和解析是两个概念，加载是并行的，解析是顺序的，
alt 就是图片不出来时，显示的文本。即 提供替代图片的信息，使屏幕阅读器能获取到关于图片的信息
title是鼠标一上去之后显示的文本
UTF-8（8-bit Unicode Transformation Format）是一种针对Unicode的可变长度字符编码，又称万国码。UTF-8用1到6个字节编码UNICODE字符。用在网页上可以同一页面显示中文简体繁体及其它语言（如英文，日文，韩文）。 （万国文）
GBK是汉字编码，是双字节码，可表示繁体字和简体字。 (中文)
ISO8859-2 字符集，也称为 Latin-2，收集了东欧字符。 （东欧文）
标题标签一般是指h1～h6，从1到6标题大小依次减小
没有h7
p标签是块级元素，常理来说，块级元素是可以嵌套块级元素和行内元素的，但是p标签是个特殊，它里面不能嵌套块级元素。
html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
设置一般用 set 开头， 获取采用 get 开头
它们的用法是（key,value）或只有key
Canvas是通过JavaScript的API进行绘图的，SVG是通过XML进行绘图的，
很多html5不存在的标签都是反语义的，直接选就完了
html5手册语义化标签：
article
section
aside
hgroup
header
footer
nav
time
mark
figure
figcaption
contextmenu+menu
repaint是某个DOM元素进行重绘；reflow是整个页面进行重排，也就是页面所有DOM元素渲染。
如何触发：
style变动造成repaint和reflow。
不涉及任何DOM元素的排版问题的变动为repaint，例如元素的color/text-align/text-decoration等等属性的变动。
除上面所提到的DOM元素style的修改基本为reflow。例如元素的任何涉及长、宽、行高、边框、display等style的修改。
常见触发场景：
触发repaint：
color的修改，如color=#ddd；
text-align的修改，如text-align=center；
a:hover也会造成重绘。
:hover引起的颜色等不导致页面回流的style变动。
等等太多，一时间写出来也太难想了。
触发reflow：
width/height/border/margin/padding的修改，如 width=778px；
动画，:hover等伪类引起的元素表现改动，display=none等造成页面回流；
appendChild等DOM元素操作；
font类style的修改；
background的修改，注意着字面上可能以为是重绘，但是浏览器确实回流了，经过浏览器厂家的优化，部分background的修改只触发repaint，当然IE不用考虑；
scroll页面，这个不可避免；
resize页面，桌面版本的进行浏览器大小的缩放，移动端的话，还没玩过能拖动程序，resize程序窗口大小的多窗口操作系统。
读取元素的属性（这个无法理解，但是技术达人是这么说的，那就把它当做定理吧）：读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))；
而在这之中visibility保留物理空间，即使设置了visibility:hidden但页面结构没有改变，所以是repaint
MVC：
模型里面放置的是处理数据的业务逻辑，主要与数据库打交道，视图通俗的说就是页面，控制器负责渲染页面和接受输入
in运算符
in运算符虽然也是一个二元运算符，但是对运算符左右两个操作数的要求比较严格。
in运算符要求第1个（左边的）操作数必须是字符串类型或可以转换为字符串类型的其他类型，
而第2个（右边的）操作数必须是数组或对象。
只有第1个操作数的值是第2个操作数的属性名，才会返回true，否则返回false。
重复之前聊过数组中空位的事情，注意：
空位不是undefined，因为undefined在本质上是有值的，是真是存在的东西，但是空位的意思是根本没有值。
验证的方法就是：
0 in [undefined,undefined,undefined]------>true
0 in [,,,]------->false
in 运算符呢，当操作对象是object时，他要验证的是是否存在这个属性，如果是数组的话，要验证的是，是否存在这个下标索引。
对于空位的处理：
注意【，，，】这里是有三个空位的，也就是说多少个，就有多少个空位
- forEach()、filter（）、every（）和some（）都会跳过这个空位。
- map（）会跳过这个空位，但是保留这个空位占据的空间
- join（）和toString（）会将这个空位当做undefined，而undefined和null会被处理成空字符串“”！！！！！
- Array.from()则会将空位转为undefined,也就是说，这个方法不会忽略空位
- 扩展运算符（...）会把空位转为undefined
- copyWithin（）会把空位一起复制
- fill（）会将空位看成正常数组位置
- for....of 会遍历空位
- entries()、keys（）、values（）、find（）和findindex（）会将空位处理成undefined。
浙公网安备 33010602011771号