笔记上传

README.md

@@ -1,2 +1,2 @@
 # StudyNote
-学习笔记
+学习笔记

html&css/box-sizing.txt

@@ -0,0 +1,5 @@
+content-box：默认属性，元素宽高 = 内容宽高
+border-box：元素宽高 = 内容宽高 + 内边距 + 边框
+
+标准盒模型即box-sizing为content-box的盒子模型，一个块的总宽度 = width + margin + padding + border
+IE盒模型即box-sizing为border-box的盒子模型，一个块的总宽度= width + margin （其中width已经包含了padding和border）

html&css/css&html性能优化.txt

@@ -0,0 +1,24 @@
+CSS性能优化
+渲染优化
+1、删除不必要的样式。不要将样式应用于不需要的元素。
+2、将CSS拆分成独立模块。如针对不同设备的css进行拆分并搭配媒体查询选择性的加载。
+3、最小化和压缩CSS。如使用打包工具去除CSS中的空格，对CSS文件进行gzip压缩。
+4、简化选择器。使用优先级低且通用的选择器，避免复杂的选择器。
+5、使用CSS精灵图减少HTTP请求。CSS精灵图可以将多个小图像放入单个图像文件中，然后使用background-position显示其一部分。
+6、预加载重要资源。使用rel='preload'的link标签去预先加载需要的资源。
+7、字体优化。字体只在实际用到时才加载，考虑使用预加载提前加载；若是只使用特定字符，则可以对字体进行子集化处理，并使用unicode-range表明在范围内的字符才触发加载；通过font-display兜底字体加载失败时显示备用字体。
+8、CSS局限优化。contain局限属性可以用于表明一些如布局/绘制/尺寸变化操作只局限于当前元素内部，这样该元素内部变动时可能进行优化不触发外部元素的布局和重绘；content-visibility: auto可开启布局/样式/绘制局限，并跳过那些于用户无关的元素的渲染（如元素远离于当前视口）
+
+动画优化
+1、通过媒体查询prefers-reduced-motion来根据用户设置决定是否显示动画。
+2、尽可能使用CSS动画，而不是JS动画。
+3、减少触发回流重绘的次数。尽量避免修改width/height等元素尺寸，top/left等元素定位，元素布局。而是采用transform。
+4、提升合成层来启用GPU处理动画。
+
+-------------------------
+HTML性能优化
+HTML本身文本内容较小，因此下载和渲染速度通常很快，影响网页的性能问题主要在#1、图像和视频文件的大小；#2、嵌入内容<iframe>；#3、资源加载顺序；
+1、响应式处理图像/视频。如使用媒体查询，img标签的srcset,sizes属性；picture标签使用source标签；video标签使用source标签
+2、内容懒加载：img标签支持loading='lazy'来设置懒加载（用户可见时才进行加载）；video标签支持preload='none'让视频不进行预加载
+3、处理嵌入内容：避免使用iframe标签，因为非同源时无法共享缓存资源；需要额外的HTTP请求加载内容；额外创建页面实例。使用网络请求获取数据并通过js脚本添加UI来代替iframe；iframe同样支持loading='lazy'进行懒加载；内容简单的页面考虑使用src属性以base-64编码的内容填充iframe；或使用srcdoc属性以HTML代码对内容进行填充。
+4、处理资源加载顺序：script标签使用async/defer进行加载；link标签属性rel='preload'来设置预加载，rel的其他值也可以帮助加速页面加载。

html&css/css层叠.txt

@@ -0,0 +1,30 @@
+指的是一个元素被应用多个样式时，浏览器解决冲突的过程
+当发生冲突的时候，只针对冲突的属性进行覆盖，而不是整个样式覆盖
+
+层叠处理方式
+1、资源顺序
+在具有相同优先级的情况下，后者覆盖前者
+
+2、优先级
+通过三个不同的值来决定权重，可以分为百位/十位/个位。通过权重决定优先级
+百位：选择器包含ID选择器+1
+十位：选择器包含类选择器/属性选择器/伪类+1
+个位：选择器包含元素/伪元素选择器+1
+
+特殊情况：
+ :not()/:is()伪类本身对优先级没有影响，但它们的参数会带来影响，取参数中对优先级贡献最大那个值。
+内联样式优先于所有普通样式，可以相当于在千位+1，即内联样式的优先级值为1000。
+!important标识的属性具有最高的优先级，覆盖!important的唯一办法就是另一个!important具有更高优先级/优先级相同顺序靠后，一般不使用!important。
+
+3、css位置的影响
+通常来说：
+用户代理样式表常规声明 < 用户样式表的常规声明 < 作者样式表的常规声明 
+< 作者样式表的!important声明 < 用户样式表的!important声明 < 用户代理样式表的!important声明
+
+对于作者（web开发人员）定义的样式：
+外部样式=内部样式<内联样式
+
+级联层中：
+级联层通过@layer layername1, layername2来进行顺序声明；并且任何层之外声明的CSS会按顺序组合在一起，形成一个未命名的层，并被当作最后声明的层
+对于常规样式：后面的层>前面的层
+对于!important样式：前面的层>后面的层

html&css/css选择器.txt

@@ -0,0 +1,15 @@
+id选择器：#myid
+类选择器：.myclass
+标签选择器：p
+
+属性选择器：a[rel='external']
+伪类选择器：包括UI元素伪类选择器（根据状态）如:hover，结构性伪类选择器（根据文档位置）如:first-child
+伪元素选择器：用于选择元素的一部分，如首行/首字母。p::before
+
+通用选择器：*
+群组选择器：用于同时选择多个选择器。 h1, h2, p
+后代选择器：如选择li下的所有a标签。li a
+直接子选择器：如选择ul的直接子li标签（注意是直接子标签）。ul > li     
+接连兄弟选择器：如选择h1之后紧邻的兄弟p标签。h1 + p
+后续兄弟选择器：如选择h1之后所有兄弟p标签。h1 ~ p
+

html&css/css预处理器.txt

@@ -0,0 +1,20 @@
+1、CSS预处理器：
+通过额外的语法来增加CSS的特性，简化了复杂样式的管理，促进代码的复用，提高CSS的可维护性和可读性。
+最终编译产物是CSS。
+SASS/LESS/Stylus都提供了变量声明/嵌套/混合/继承/函数/操作符特性
+
+SASS
+SASS额外提供了条件判断/循环，变量通过$开头进行声明
+使用缩进语法
+新的SCSS语法则与CSS类似，并拥有SASS的特性
+
+LESS
+LESS变量通过@开头进行声明
+语法与CSS类似
+
+Stylus
+额外提供了条件判断/循环
+使用缩进语法
+
+2、说明
+#1、混合：以SASS为例，通关@mixin定义一个混合，并在其中编写css属性。之后便可以在其他选择器中通过@include加入该混合，这样就拥有了该混合所定义的属性。（混合也支持定义参数，使用时就像调用函数一样。）

html&css/html5&css3新特性.txt

@@ -0,0 +1,25 @@
+html5新特性
+1、语义化标签
+2、视频和音频支持：<video><audio>标签支持在浏览器中嵌入视频和音频
+3、画布元素：<canvas>用于绘制图像，制作动画，可以通过js控制
+4、地理定位：通过navigator.geolocation API运行网页访问用户地理位置
+5、Storage：LocalStorage/SessionStorage提供本地存储
+6、WebWorkers：运行使用工作线程执行JS
+7、WebSocket：建立在TCP的全双工通讯协议
+8、表单元素改进：增加新的表单元素如<datalist><output><calendar>，新的input类型如<email><url><number>，以及自定义表单控件样式
+9、拖拽API：允许用户将一个元素拖放到另一个位置
+10、离线应用和缓存：使用applicationCache API使网页在没有网络的情况下也能访问
+11、history API：用于操作浏览器当前tab的历史记录
+12、requestAnimationFrame：用于动画
+
+css3新特性
+1、transition：对css属性做过渡动画
+2、animation：对元素做整体动画
+3、transform：形变
+4、nth-of-type()：伪类，用于选取兄弟元素中的指定位置元素，比如奇数位的元素
+5、阴影：如文字阴影text-shadow/盒子阴影box-shadow
+6、border-image：取代常规边框绘制图像
+7、渐变
+8、Filter滤镜
+9、媒体查询：用于查询设备信息以适配不同样式
+10、新布局：弹性布局/网格布局/多列布局

html&css/position.txt

@@ -0,0 +1,7 @@
+用于指定一个元素在文档中的定位方式，并配合top/right/bottom/left决定元素最终位置
+
+1、默认定位static：默认值，此时元素的top/bottom/left/right/z-index声明都将无效。
+2、相对定位relative：元素不脱离文档流，占据原来的空间，并在原来的位置上进行偏移。
+3、绝对定位absolute：元素脱离文档流，依据最近的非static定位祖先元素进行偏移。
+4、固定定位fixed：元素脱离文档流，依据屏幕视口进行偏移。当元素祖先的 transform、perspective、filter 或 backdrop-filter 属性非 none 时，容器由视口改为该祖先。该属性会创建层叠上下文。
+5、粘性定位sticky：元素不脱离文档流，会依据其最近滚动祖先和最近块级祖先进行定位，在阈值前会随着文档流移动，阈值后则根据祖先进行偏移。该属性会创建层叠上下文。

html&css/区块格式化上下文.txt

@@ -0,0 +1,19 @@
+简称BFC，是块级盒子布局发生的区域，决定了内部的布局方式（流式布局）。
+
+1、常见创建方式
+文档根元素<html>
+浮动元素，float不为none
+定位元素position值为absolute/fixed
+display为inline-block/table-cell/table-caption/flow-root
+overflow不为visible/clip
+弹性元素/网格布局元素 （不是容器，是容器的一级子元素）
+
+2、特性
+包含内部浮动，如计算高度时内部浮动元素也参与计算
+排除外部浮动
+阻止外边距重叠（阻止只发生在BFC本身与子元素，*BFC与外部元素/子元素与子元素不会阻止）
+
+3、补充
+*display为flex/grid时也会创建对应的弹性/网格格式化上下文。除布局方式不同外，它们也拥有排除外部浮动，阻止外边距重叠的特性。（flex/grid中没有可用的浮动子级，所以并没有包含内部浮动的特性）
+*display: flow-root是新增的用于创建无副作用的BFC的方式，从字面上来看其行为就像是一个根元素
+*外边距折叠只发生在上下外边距中，且不会发生在flex/gird容器中，当兄弟元素的上下外边距/父元素的上（下）外边距和子元素的上（下）边距/空内容本身的上下外边距中没有内容（边框/内边距/内联元素/自身height不为0/创建区块格式上下文）填充时，就会发生重叠，此时这些外边距中，先正正取最大，负负取最负，然后正负极值相加。

html&css/媒体查询.txt

@@ -0,0 +1,19 @@
+在CSS中：
+使用at语法搭配条件规则来有选择的应用样式。
+#1、@media来有条件的应用部分样式；
+#2、@import来有条件的应用整个样式表
+语法：@media 条件。条件可以是设备类型如screen/可以是视口宽高查询如(max-width: 480px)/可以是用户的系统设置如(prefers-reduced-motion: reduce)表示是否开启动画减弱等等；并且条件支持and/or/not逻辑运算符
+如：@media screen and (max-width: 480px) { ...css规则... }
+*#3、还可以通过@container来使用容器查询。使用时需要给观察的元素添加contaier-type属性使其成为容器上下文并确定要观察的类型，子元素通过@container 条件，来查询具有容器上下文的最近祖先，当满足条件时会应用花括号里包裹的样式。
+
+在HTML中：
+一些元素支持媒体查询属性。
+#1、link通过media='条件'来有条件的加载所需资源；
+#2、source标签通过media='条件'来决定所包含资源是否被选择；
+#3、style标签通过media='条件'来决定是否应用内部样式
+#4、img标签通过srcset来根据设备分辨率/视口宽度来决定使用哪张图片
+*上述的media属性所使用的条件规则与css的@medie条件规则语法一致
+
+在JS中：
+#1、使用Window.matchMedia(条件)来查看文档是否满足条件。其返回一个MediaQueryList对象，该对象的matches属性(bool)表示是否匹配。
+#2、使用MediaQueryList.addListener(callbackFun)来响应媒体查询状态的更改。

html&css/布局与适配.txt

@@ -0,0 +1,76 @@
+0、display
+display作用：#1外部元素设置元素如何参与流式布局，即是否被视为块级或行级盒子；#2内部元素决定子元素的布局方式
+现在使用多关键字进行描述，一般写为 display: 外部表现 内部表现
+关键值可分为：
+外部表现：block/inline，决定了元素的外部显示类型，即在流式布局中的角色
+内部表现：flow/flex/grid/flow-root/table，决定了内部元素的布局方式
+盒子相关：none/contents，决定是否展示display盒，contents会被伪盒子和子盒子所取代；none使元素不再处于文档渲染中
+预组合：作为多关键字的CSS2预定义版本，如inline-flex相当于inline flex
+*不常用的关键值
+列表元素：listitem，为内容生成一个块级盒子和一个单独的列表元素行级盒子
+内部值：如table-*/ruby-*，只用于table/ruby的子元素
+
+1、flex弹性布局
+布局中主要包含主轴和交叉轴的概念，布局容器决定轴的方向，子元素决定在容器中的尺寸；
+该布局换行时，每一行都相当于一个新的弹性容器，在布局的时候不会考虑其他行元素的尺寸；
+和grid布局一起使用的时候，grid布局优先级更高，所以可以作为grid布局的回退；
+容器属性：
+flex-direction：决定主轴的方向，而交叉轴与主轴垂直
+flex-wrap：决定元素溢出时是否换行
+flex-flow：flex-direction和flex-wrap的组合简写
+align-items：指示子元素在交叉轴方向的对齐方式
+justify-content：指示子元素在主轴方向的对齐方式
+align-content：指示多条主轴（多行）在交叉轴方向的对齐方式
+子元素属性：
+flex-grow：当容器可用尺寸>0时，决定元素尺寸如何增长
+flex-shrink：当容器尺寸小于元素总尺寸时，决定元素如何缩小
+flex-basis：决定元素主轴方向的尺寸，auto时会采用元素的width/height/内容尺寸，当有具体值时优先级更高
+flex：flex-grow flex-shrink flex-basis的组合简写
+align-self：控制元素自身在交叉轴方向的对齐方式
+order：决定视觉排列顺序，默认为0，越小排越前，不会影响逻辑顺序（比如使用键盘tab切换选项时根据的是逻辑顺序）
+
+2、流式布局
+通过子元素的display的外部表现来区分块和内联元素并使它们工作在块格式区域或内联格式区域中。
+块格式区域中，盒子从包含块的顶部开始垂直排列，并遵循外边距折叠；其左外边缘和包含块的左外边缘重合（从左到右书写模式下）
+内联格式区域中，盒子从包含块的顶部开始按序水平排列，包含一串盒子的区域称为行框。只有水平的外边距/边框/内边距会被保留（垂直的内边距/边框虽然有图像显示，但不会影响后续元素的位置，另外inline-block比较特殊可以使用垂直的外边距/边框/内边距）
+
+内部元素可以搭配float浮动，position绝对定位来脱离正常的文档流（float在其他布局方式中会失效，postion依然有效）
+
+3、网格布局
+网格布局中，子元素的尺寸通过容器来定义，以定义行列轨道的方式定义子元素尺寸
+容器属性：
+grid-template-rows：定义显示网格的行轨道，通过空格来分割每个轨道的定义，如grid-template-rows: repeat(3, 1fr) 200px 1fr
+grid-template-columns：同上类似作用
+grid-auto-rows：定义隐式网格的行轨道，隐式网格指的是由于内容太多，需要额外的网格轨道，那么就会创建隐式网格。
+grid-auto-columns：同上类似作用
+column-gap：定义列之间的间距
+row-gap：同上类似作用
+gap：column-gap和row-gap的联合简写
+子元素属性：
+grid-column-start/grid-column-end：定义该元素所在网格的起始列和结尾列，通过该定义可以让该元素跨越多个轨道
+grid-row-start/gird-row-end：同上类似作用
+grid-column：对grid-column-start/grid-column-end的联合简写。如grid-column: 1/4表示起始列为1，结尾列为4
+grid-row：同上类似作用
+z-index：以上的属性会导致元素跨越多个轨道，就用可能产生重叠，使用该属性决定显示顺序，越大显示越前面。
+使用的值：
+fr：用于表示分配空间的权重，在可用空间扣除固定值后，剩下的空间会按比例分给使用fr的轨道。
+repeat()：用于定义重复的轨道，第一个参数为重复次数，后面的参数列表为重复的内容。如repeat(5, 1fr, 2fr)为重复5次1fr 2fr的轨道，一共10个轨道。
+minmax()：用于定义尺寸范围，如minmax(100px, 200px)
+subgrid：用于在嵌套的子元素中表示延用父容器的网格设置
+
+4、适配方式
+#浏览器视口：
+#1、布局视口指的是整个网页内容布局的矩形区域（可以通过document.documentElement.clientWidth/clientHeight获取）；
+#2、可见视口指的是布局视口在当前设备可见的矩形区域；
+#3、理想视口指的是通过使用viewport的meta标签进行配置并且其width为device-width，缩放比为1的配置布局视口。该配置只对移动端生效，PC端的视口一般固定为浏览器窗口大小，可以设置width/height/initial-scale/minimum-scale/maximun-scale/user-scalable属性。（如果不设置width则默认是980px）
+#适配方案：实际使用的时候搭配媒体查询去动态设置值，并且要设置理想视口
+#1、百分比布局：使用%来设置尺寸，配合max-width/min-width来控制尺寸范围。缺点在于无法对字体大小进行适配；不同属性参考对象不同；页面元素较多时计算复杂。
+#2、rem布局：rem是基于根元素font-size的单位，页面的所有元素采用rem单位进行尺寸设置，通过js设置根元素fontsize来进行等比缩放，fontSize = viewportWidth/ 设计稿宽；或推荐使用css设置font-size: calc(100vw / 375)，并搭配webpack在打包时自动将px转换为rem。缺点在于可能出现小数点像素产生四舍五入导致渲染偏差；等比缩放下大设备的字体尺寸过大。
+#3、vw/vh适配：1vw即布局视口宽度的1%，100vw即视口宽度，vh同理。使用vw/vh进行内容的尺寸设置，必要时使用vmin/vmax设置字体尺寸处理横屏字体过大问题，最后搭配webpack进行px2viewport的自动转换，该方案可以作为rem的替代品。缺点在于Android4.4一下不支持该单位。
+#4、响应式布局：通过媒体查询+弹性布局去设计页面，保证不同分辨率下虽然页面结构可能不一致，但依然可以使用主要内容。
+
+5、常见适配问题
+#1、1px像素过粗问题。原因在于采用等比缩放适配（如rem适配）时设计稿1px的像素在实际中被缩放为小于1px的像素，但是很多移动设备的最小可显示像素为1px。通过transform属性对1px的内容进行缩放来解决。
+#2、默认样式重置：在开发页面时通常会进行默认样式重置来统一不同浏览器的初始样式。
+#3、不同dpr设备的图片适配：使用img标签的srcset和sizes属性来设置不同尺寸的图片。（具体参考媒体查询）
+

html&css/常见兼容性问题.txt

@@ -0,0 +1,14 @@
+1、不同浏览器标签默认的margin和padding不一样
+使用css  *{margin:0; padding:0;}统一设置
+
+2、IE6双边距bug：块属性标签float后，又有水平的margin情况下，IE6显示的margin比设置的大
+设置display: inline
+
+3、IE6/IE7中设置较小高度标签，浏览器显示高度尺寸更大
+尝试overflow: hidden，或设置行高line-height小等于你所设置高度
+
+4、Chrome中文界面默认将小于12px的文本强制设置12px显示
+css中使用-webkit-text-size-adjust: none
+
+5、超链接的不同样式编写顺序
+LVHA，即 a:link{}  a:visited{} a:hover{} a:active{}，原理就是层叠中同优先级的属性冲突，后者覆盖前者