海绵宝宝学习前端

HTML+CSS

1.标签

input 标签

css属性

outline：是border外面的一层，input输入框获取焦点的时候出现的就是这个

事件

@input ：当键盘输入时，触发input事件，event.detail = {value}
@compositionstart 先于input事件触发。开始输入中文的时候会触发一次compositionstart事件，中文输入过程中不会再出发compositionstart事件
@compositionend 输入中文完成触发compositionend 事件

table标签

table标签本身没有滚动条，要用个div抱起来，或者换句话说目前只有block属性的才有滚动条出现

textarea

禁止拖动框改变大小。
q:多行文本在Chrome,Safari和FireFox渲染的效果不同，可以拖动右下角图标改变大小，但是想禁止拖动框改变大小，固定文本框的大小。
sovle方法：
1.禁止拖动框改变大小

2.最大的高度=高度

2.选择器

1.基础选择器

id>类>标签>通配符

2.多个选择器混用

后代 ：空格
子代： >
交集：没有间隙 既是又是
并集：，

3.伪类选择器

hover

结构伪类

注意点：作用在子元素身上，不是父元素

li:first-child{
   
   }//父元素的第一个并且是li 才能够选中，否则不选中
li:last-child{
   
   }
li:nth-child(n){
   
   }
li:nth-last-child(n){
   
   }

li:nth-child(n){
   
   }//先找到父元素的第n个元素，并且同时必须是li元素
li:nth-f-type(n){
   
   }//父元素中提取li元素，并选中第n个li元素

链接伪类选择器(针对a标签)

LVHA
link
visited
hover
active

焦点伪类选择器（正对input标签的）

当input标签获取焦点

    <style>
        input:focus {
   
     
            background-color: lightblue;
        }
    </style>

属性选择器

4.属性选择器

3.字体，文本样式，背景，盒子，伪元素

3.1字体

3.2文本样式

word-break
white-space

word-break 文本打断

white-space属性

是什么：是用来定义元素内的空白该如何处理

块级元素且固定的宽高：

一般情况下，块级元素都是默认自动换行(这的元素只指块级，table和display：table还没有研究)，所以块级元素内部的文本会自动换行，（无论中英文，就是英文单字都会被截断换行。）
1.中英文文本内容一行超出宽度会自动换行，换行超出高度溢出。默认自带：white-space:normal 自动换行属性
jiceh

链接: link white-space知识点

问题：

1.不想换行：

white-space:nowrap。

2. 不换行，超出宽度，省略号

2.1.单行文本不换行
3个属性必须设置

text-overflow属性必须配合这两个属性一起使用才生效。

2.2.多行文本超出规定行数显示省略号。
5个属性要必须设置。
区别：单行不换行省略。
overflow和text-overflow不变。white-space不需要。
变化3个：父盒子：变为弹性盒子。第几行省略，子元素排列方式

display-cell 文本内容

3.强制换行：

3.3盒子

1.盒子width和height设置

盒子是块元素
1.盒子没有设置宽高：
盒子宽：是父元素的宽，默认撑开一行（如果父元素设置了padding，盒子的宽度就是父元素盒子内容的宽度）和子盒子没有关系，
盒子高：没有内容就是0，有内容靠内容撑开。.
2.盒子设置了宽高：
盒子宽高设置

2父子盒子之间关系

1.父，子盒子都没有设置宽高
父盒子的宽：父盒子的父元素的内容的宽
父盒子的高：0
子宽：父盒子的内容宽
子高：0
2.父设置宽高，子没有设置宽高
父：设置了宽高
子：子高：0或者是子里面的内容撑开
3.父子都设置宽高:
子盒子的宽高大于父盒子。
子盒子会溢出父盒子。
4.父没有宽高，子有宽高
1.父：
父宽：之和父盒子的父元素有关系，默认一行。
父高：和子元素有关系，由内容撑开

3.盒子和文本内容

盒子中的文本内容如果超过盒子的宽高，就会溢出。除非盒子设置了overflow属性
1.当文本内容超过盒子的宽度：
一般会自动换行，但是如果是没有空格的英文会自动识别成一个字符就不会换行
2.当文本超过盒子高度：
直接溢出盒子的高度。

盒子总结

盒子没有设置宽高：
盒子：宽：由盒子的父元素宽决定
高：由盒子里面子元素的内容撑开
盒子设置了宽高：
里面的内容超出盒子的宽高会溢出。
如果里面的内容脱离标准流，父盒子不会被撑开。
盒子的margin注意点
两个盒子之间：
上下margin合并（产生塌陷问题：外边距塌陷和包含塌陷）
左右的margin不合并

3.4 伪元素

4.位置（定位，浮动，修饰，布局）

4.1布局

常见布局：静态布局，流式布局（又称百分百布局），弹性布局，自适应布局，响应式布局

静态布局

网页的元素和内容的大小和位置都是固定的，无论浏览器窗口的大小如何改变，网页的布局不会发生任何变化。
全部用px，窗口大小无论怎么变化网页不会变化

流式布局（又称百分百布局）

页面元素的大小和位置是相对的，页面内容会随着浏览器窗口的大小而自适应地调整，但是页面元素的相对大小和位置比例保持不变。
用px+百分百制作。
当页面窗口变化，百分百的部分会随着页面窗口的变化而变化。会变得很大也可能变得很小，但是元素相对于窗口的位置以及大小都不会变，元素和窗口就是等比例缩放的意思。
链接: 两栏布局

弹性布局

元素的大小和位置会根据浏览器窗口大小进行调整，同时也可以使用弹性盒模型（Flexbox）或栅格系统（Grid）等技术实现灵活的布局。
使用flex和grids技术实现。

自适应布局

提前设置好不同的布局格式，根据设备的屏幕尺寸，自动选择最适合的布局尺寸进行展示。

响应式布局

区别自适应：不是提前设定好的布局格式，是动态生成的。
响应式布局则是指通过使用CSS媒体查询等技术，根据设备的屏幕尺寸和分辨率来动态地调整网页元素的样式、排列和布局等，以实现最佳的显示效果。在响应式布局中，网页元素的布局和样式是根据不同的屏幕尺寸和设备类型来自适应地调整的，从而能够更好地适应各种设备和屏幕。

总结

4.2 能改变位置的css和布局相关的属性

浮动：float，定位position，flex，vertical-align ,grid布局

flex（具体属性见面试css flex布局）

使用flex，浮动和vertical失效

grid 布局

链接: grid 布局

注意点
1.父子是亲父子才有效，对孙子无效

容器属性：

在这里插入代码片

1.display:grid(块) display: inline-grid（行内块）：注意，设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

2.定义列行单元格的大小 grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。
规定的方式有：
（1）直接写px或者百分比，有几列写几个
（2）用repeat()函数
函数 repeat()接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值单元格的大小。
第一个参数：可以写数字，也可以写auto-fill(使用情况：单元格大小固定，容器大小不确定，且要单元格填充满容器。代表单元格大小固定，自动填充容器，有多少填充多少个单元格)
第二个参数可以写不知只一个

（3）fr 比例单位，列于列之间的大小关系看比例，且可以和可以和px合用，类似flex的用法


（4）minmax（）函数，表示一个范围，可用于列宽也可用于行高
两个参数，
第一个参数最小值
第二个参数最大值，可用px，fr

（5）auto

3.定义行列之间的空格
grid-row-gap 属性，grid-column-gap 属性，grid-gap 属性
单位：px

4.每一个单元格定义名字
== grid-template-areas== 属性
网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。

5. grid-auto-flow 属性 == 容器子元素的排列顺序==，先行后列默认，
   

6 定义单元格里面内容，在单元格的位置
justify-items 属性，属性设置单元格内容的水平位置（左中右）
align-items 属性，属性设置单元格内容的水平位置（左中右）
place-items 属性

7.整个内容区域在容器里面的位置
justify-content 属性，整个内容区域在容器里面的水平位置（左中右）
align-content 属性，属性是整个内容区域的垂直位置（上中下）。
place-content 属性 合写 先垂直后水平

容器里面项目属性：

1. 关于指定单元格位置：2个方法：
   1.通过指定边框
   2.通过定义的区域名称
   法1.项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。
   
   合并简写形式：
   

值：数字（代表从左往右从上往下第几个线）
或者是网格线名称（来源：1.grid-template-area给每个单元格起名字，同时影响到网格线的名字。2.grid-template-columns在定义列宽的时候也可以定义网格线名字）

法2：
grid-area属性指定项目放在哪一个区域。

2.
justify-self 属性，
align-self 属性，
place-self 属性

5 。转换（transform属性：平面：位移，旋转，缩放。空间：位移，旋转，缩放）

5.1平面转换
5.2空间转换

5.1 平面转换：位移，旋转，缩放

位移:

单位：
1.px
2.%（相对已自己的宽高）

//平面没有Z方向
transform:translateX(50px)
transform:translateY(50px)
transform:translateZ(50px)
transform:translate(50px,50px)

旋转:

正：顺时针
负：逆时针
单位：deg
用法： 1.改变旋转角度
2.改变旋转中心

//旋转
transform:rotate()
//改变旋转中心：
transform-origin: top/left/right
transform-origin: 数字+px
transform-origin: 百分比

缩放

单位：没有单位，>1 放大 ，<1缩小

transform:scale(0.1)

5.2 空间转换

空间位移

Z轴平移：属于立体效果(近大远小)，默认情况下网页是不支持透视，如果需要看见效果必须要设置网页的视距。
父元素：设置perspective: 800px;
子盒子：transform:tranlatez(200px)

perspective: 800px;
transform:translate3d(x,y,z)

空间旋转

transform-style: preserve-3d;
transform:rotate3d()

空间缩放

动画

5 动画（说白了控制元素移动）

链接: 动画

5.1 过渡（4个属性，加1和合写）

使用步骤分两步

1.第一步：触发条件以及过渡的结束状态（当条件触发过渡开始，当条件结束，属性会按照原来的方式变回初始状态，不是一下子就变成初始状态）
2.第二步：定义过渡的属性

指定需要过度的属性名 ： transition-property 如：all(所有属性)、width、height、background、…

1.多个属性间使用,隔开（ transition-property: width,height;）
2.如果所有属性都需要过渡，则使用all关键字
3.大部分属性都支持过渡效果，注意过渡时必须是有效数值向另外一个有效数值进行过渡，比如auto向0过渡就不是一个有效值

transition-duration:过渡效果执行的时间

1.时间单位:s 和 ms 1s=1000ms
2.可以分别指定时间（transition-duration: 100ms,2s;）分别指定时间是因为可以指定多个属性同时变化，分分别指定的时间和transition-duration中分别指定的元素的css属性一一对应

transition-timing-function:规定过渡的速度曲线

1.ease 默认值 ，慢速开始，先加速，再减速
2. linear 匀速运动
3.ease-in加速运动
4.减速运动ease-out
5.先加速在减速ease-in-out

transition-delay；规定过渡何时开始

单位是s

transition简写模式 ：

ransition-property transition-duration transition-timing-function transition-delay
可以同时设置过度相关的所有属性,只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟

.box{
   
   
//单个属性
transition:background 0.5s ease-out 0s;
//多个属性  多个属性之间用逗号隔开
transition:background 0.5s ease-out 0s,color 0.5s ease-out 1s
}

触发过渡的方式

常见的就是伪类触发:hover，:active，:focus，:checked等。还有例如@media媒体查询，根据设备大小，横屏竖屏切换时触发。还有，如click，keydown等JS事件触发，页面加载也能触发就不一一列举了。

5.2 动画

使用步骤分两步：

1.第一步@keyframs 定义动画
2.第二部定义动画的运行方式

1.animation-name:指定要对当前元素生效的关键帧的名字（keyframs定义的）
2.animation-duration:指定动画的执行时间
3.animation-timing-function:跟transition-timing-function用法一样，step是值每一帧之间的步数
4. animation-iteration-count:指定动画执行的次数

默认： animation-iteration-count:infinite;（无限执行）

5.animation-direction:指定动画运行的方向

normal 默认值 从from向to运行 每次都是这样
reverse 从 to 向 from 运行 每次都是这样
alternate 从 from 向 to 运行 重复执行动画时反向执行 (一开始从from到to在结束状态的时候，to到from来回执行。这个要配合 animation-iteration-count:infinite;（无限执行）一起用)
alternate-reverse 从 to 向 from运行 重复执行动画时反向执行

6. animation-play-state:设置动画的执行状态

可选值:
running 默认值 动画执行
paused 动画暂停

7.animation-fill-mode:指定动画的填充模式

可选值: none 默认值 动画执行完毕元素回到原来位置 forwards 动画执行完毕元素会停止在动画结束的位置 backwards
动画延时等待时，元素就会处于开始位置 both 结合了 forwards 和 backwards

8.animation-delay:设置动画的延时

动画与过渡的区别：

1.过渡需要一个触发，动画不需要触发，只要定义完毕就行。

5.3 变形

5.4 旋转

5.5 缩放

6.常见属性积累

contenteditable：true(开启可编辑模式)/false
pointer-events: none; 点击穿透当层

画一个table样式什么方法

1.table组件
2.display：table
3.ui li ，li浮动

两个display-inline的元素在同一行但是位置错落了

链接: 使用display: inline-block出现错位

原因：设置display-inlineblock，两个元素默认baseline对齐，就有可能造成错落，因为两个元素的基线可能不一样，
解决方法：1. vertical-align：top等  
         2.干脆不用display-inlieblock布局，换其他的方式

100%的用法

line-height:： 可作用在块元素，行内元素，行内元素，是告诉作用的标签以及标签中的子标签，只要有文本，文本高度是多少。
line-heighr:100% 这个100%吃的是当前标签的font-size大小，如果没，网父层吃，不会往子吃。
text-align:center 居中：作用于有宽度的行内块或者块元素，如果作用在行内元素上无用（行内元素也不能设宽度）。
margin-top:50%,这个50%吃的是父层的宽度，是宽度的50%，父层没有，再往上吃。 position:relative
top,left 移动百分比位置是移动自己的宽高 position：absolute top left 移动位置是移动
position:absolute 之后，盒子width:100%,吃的是父级且有定位，如果没有就是body宽度
transform:tanslateX() 百分之是自己的百分之多少

bfc

bfc是什么

块级格式上下文。
内部布局规则：垂直方向一个接一个
每一个BFC区域只包括其子元素，不包括其子元素的子元素。

bfc用处

在浏览器页面中创立了一个独立渲染的区域，bfc内部的元素无论怎么样都不会影响到bfc外面的元素。

bfc如何产生

脱标+display+overflow

    1.浮动的元素，除了float：none
    2.定位：absolute和fixed  
    3.diplay：inline-block,table（行内块元素），flex（弹性布局）
    4.overflow:不是visible，
                       hidden（推荐）

用处1：清除浮动带来的影响

问题：父盒子没有设置宽高，子盒子浮动，父盒子不会被撑开。
bfc内部的盒子就算是浮动的也参加计算
所以：清除浮动，父元素设置为bfc，子盒子就算浮动也要进入计算，所以父盒子还是被子盒子撑高了。

用处2：解决margin塌陷

1.外边距塌陷：将两个盒子分别放在两个bfc中。即将两个盒子通过两个bfc盒子进行隔离。
2.包含塌陷：将父盒子变成bfc盒子。子盒子就不会和父盒子产生塌陷。父盒子内的子元素不会影响到父盒子的外面，以父盒子的border为界限。子元素不会影响到父盒子border以外的东西。

css引入

css引入三种：内嵌，外联，行内式

1.行内式

标签内部 style =“”

2.内嵌：

head标签内部style标签

3.外联：

外联有两种方法link与@import

3.1 link head标签中link标签

3.2 @import head标签中style标签@import

link和@import区别：5点

1、从属关系：link是html的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等；而@import是css的语法，只有导入样式表的作用。
2、加载顺序：页面被加载时，link会和html同时被加载而；@import引入的 CSS 将在页面加载完毕后被加载。（@import是再dom树渲染完毕之后，才加载的）
3、兼容性：@import是 CSS2.1 才有的语法，所以只能在 IE5以上 才能识别；而link是 HTML 标签，所以不存在兼容性问题。
4、DOM：javascript只能控制dom去改变link标签引入的样式，而@import的样式不是dom可以控制的。（@import不能通过js'代码控制，link引入的标签是可以的。）
5、link方式的样式权重高于@import的权重。

link和@import使用场景区别

@import是依赖css的，存在一定的兼容问题，并且根据浏览器渲染机制来说，他在dom树渲染完成后才会渲染，并且不能被js动态修改。相比之下link兼容性较好，且dom元素的样式可以被js动态修改，又因为link的权重高于@import，
所以 @import适用于引入公共基础样式或第三方样式，link适用于自己写的且需要动态修改的样式。

简述src和href的区别

相同点：都是引用外部资源
不同点：

href	src
link,a标签使用	script，imag，video,audio等标签使用
将当前元素和外部资源建立联系，当浏览器解析到href时，解析不会停止	src用外部资源替换当前元素，当浏览器解析到src时，会暂停浏览器的解析，去下载外部资源。所以再用script引入js文档的时候，要写在最后，目的是最后去去加载js文档

行内元素，行内块，块元素

1.行内元素：
2.行内块元素：
3.块元素：

	行内元素	行内块元素	块元素
	一行多个	一行多个	独占一行
	不可设置宽高，宽高就是内容大小，行内元素的宽高是被内容撑开，设置宽度，高度，以及行高，和text-align都是无效的	可设置宽高	可设置宽高
	水平方向上的padding和margin可以设置，垂直方向上的无效	水平方向上的padding和margin可以设置，垂直方向上的无效	margin，padding都能设置
	行内元素中只能放行内元素标签或者纯文本==（a标签除外，a里面不可以放自己）==		块级标签内部能放块，行内块，行内元素
标签	a,span,伪元素，img（可以当行内块使用）	input,textarea,button,select	div,p,h,ul li,ol li,dldtdd

JS

promise

  class Promise {
   
   
    constructor(executor) {
   
   
      this.PromiseState = 'pending'
      this.PromiseResult = undefined
      this.calbackFn ={
   
   }
      const _resolve =value => {
   
   
        if(this.PromiseState == 'pending' ) return
        this.PromiseState = 'fulfilled'
        this.PromiseResult = value
        if(this.calbackFn.onfulfiled){
   
   
          this.calbackFn.onfulfiled()
        }
      }
      const _reject =value => {
   
   
        if(this.PromiseState == 'pending' ) return
        this.PromiseState = 'rejected'
        this.PromiseResult = value
        if(this.calbackFn.onreject){
   
   
          this.calbackFn.onreject()
        }
      }
      try{
   
   
        executor(_resolve,_reject)
      }catch (err){
   
   
        _reject(err)
      }
      executor(_resolve,_reject