发表于 |
字数统计: 156 | 阅读时长 ≈ 1

###冒泡排序

1.第一遍 两两比较 结果:最大的跑到最后

2.第二遍 两两比较 结果:最后两个准确

代码:
1.第一次把最后一个值确定为最大

1
2
3
4
5
6
7
for (let i =0 ; i< array.length - 1; i++){
    if(array[i]> array[i+1]){
        let temp = array[i+1];
        array[i+1] = array[i];
        array[i] = temp;
    }
}

2.确定每次都是-1的两两交换的个数

1
2
3
4
5
6
7
8
9
for (let j = array.length - 1 ; j > 0 ; j--){
  for (let i =0 ; i< j; i++){
     if(array[i]> array[i+1]){
         let temp = array[i+1];
         array[i+1] = array[i];
         array[i] = temp;
     }
 }
}

###选择排序

###插入排序

发表于 |
字数统计: 61 | 阅读时长 ≈ 1

栈空间

1.在其中申请一块区域 通过指针(变量名)改变

2.基本数据类型都是放在栈空间

堆空间

1.引用类型,放到堆空间,但是内存地址是放在栈空间

发表于 |
字数统计: 118 | 阅读时长 ≈ 1

6.15开课吧

1.window和document的区别

2.customElements.define(my-custom, myCustom)

3.arrt.title&&arrt.title.value||’默认’

4.** prototype属性的引入**

考虑到这一点，Brendan Eich决定为构造函数设置一个prototype属性。

这个属性包含一个对象（以下简称”prototype对象”），所有实例对象需要共享的属性和方法，都放在这个对象里面；那些不需要共享的属性和方法，就放在构造函数里面。

发表于 |
字数统计: 314 | 阅读时长 ≈ 1

定位

标准流(Normal Flow)

坐标系:从左往右,从上到下

1.默认情况下都是按照标准流排布

原理:因为很难实现兄弟元素中间的层叠效果

1.static: 默认属性

2.relative: 相对定位,相对于原来的位置.但是原来的位置还是不会改变(类似于opacity:0).不会影响其他元素,没有脱离标准流

left的百分比是相对于包含块
margin左右的百分比也是相对于包含块
transform:translate的百分比是相对于自己元素的

3.absolute: 绝对定位,冒泡寻找根元素,如果不是static则从当前元素的0,0开始.如果都是static则从最外层0,0开始

4.fixed: 固定定位,直接相对于浏览器定位

浏览器的展示大小叫视口
浏览器的可展示大小叫画布

脱标

脱标元素:fixed,float,absolute

1.可以随便设置宽高

2.宽高默认由内容决定

3.不再受标准流的约束

4.不再给父元素宽高数据

5.其实脱标是把元素转为block,而不是inline-block.但是因为是脱标不好规定父级元素,所以改为包裹内容.

发表于 |
字数统计: 59 | 阅读时长 ≈ 1

###立即执行函数

1.js不允许在一个函数的声明后面加()执行
function test(){

}()
2.所以要加东西把函数变成表达式!,()等

3.IIFE执行完后,立即销毁,所以不需要名字

发表于 |
字数统计: 187 | 阅读时长 ≈ 1

Emmet语法:用来快速创建html元素

1.div>span (div内嵌套span)

2.div+span (div兄弟span)

3.div>p*5 (div内嵌套5个p标签)

4.div>p+span^h1+strong

1
2
3
4
5
6
<div>
    <p></p>
    <span></span>
</div>
<h1></h1>
<strong></strong>

5.div>(p>span)+h2来代替^

6.div#main>div.box+p.p1+span.title^div#footer>div.box2

1
2
3
4
5
6
7
8
<div id="main">
    <div class="box"></div>
    <p class="p1"></p>
    <span class="title"></span>
</div>
<div id="footer">
    <div class="box2"></div>
</div>

6.生成内容用{}

7.#main

1
<div id="main"></div>

8.w20+h30+m20-30-40-50+fz20+lh50px+bgc#333+dib(没成功,但可以单个写)

发表于 |
字数统计: 206 | 阅读时长 ≈ 1

###网页的显示过程

1.通过服务器返回html+js+css>浏览器解析

2.发送至少一个请求

3.网页的组成：
html：网页的结构
css: 网页的视觉体验
javascript：网页的交互

4.浏览器的内核：解析html+css+js
（渲染内核+js引擎）
trident（三叉戟）：ie、uc、360
gecko（壁虎）：firefox
webkit：safari、移动端浏览器控件（webview控件实际上是webkit内核）
webkit->blink：google chorme

5.为啥有html和htm：因为早期dos只支持3个字符

6.HTML全称：hyper text markup language

7.元素（element）：标签（img）加内容

8.css画三角形，参考triangle.html 利用border，border的长度都是和div元素做比较

9.html元素
1.doctype是表示html5的方式
2.html分为head和body 属性为lang
3.head里属性有title,meta,link(引用css和icon)

发表于 |
字数统计: 29 | 阅读时长 ≈ 1

盒子模型

内容盒子

box-sizing = 内容+margin+padding

边框盒子

box-sizing 不变,会改变content的高度.

发表于 |
字数统计: 243 | 阅读时长 ≈ 1

伪类

1.目标伪类: 主要应用于锚点

:target(选中的锚点添加状态p:target是交集选择器)

2.目标状态伪类

:disabled, :enabled, :checked

3.动态伪类: 有顺序要求

a:link(未访问), a:visited(已访问), a:focus(tabindex属性=-1来去掉tab), a:hover(移动放上去), a:active(手指点下去)

4.结构伪类

  • :nth-child(n), n是正整数(包括0).排行榜可以用-n+3来设置前三名
  • :nth-last-child(n), 倒着数
  • p:nth-of-type(n) 只找p的n数
  • p:nth-last-of-type(n) 倒着
  • :only-child (唯一子元素)
  • :only-of-type(唯一类型子元素)
  • :root(相当于html元素)
  • :empty
  • :not()

伪元素(区别伪类一般2个冒号,可以看成行内元素)

  1. p::first-letter
  2. p::first-line
  3. ::before(利用content来在元素前添加东西(可以是url()))
    1
    2
    3
    4
    span::before{
      content: "123";
      color: #0f0;
    }
  4. ::after(利用content来在元素后添加东西(可以是url()))
    1
    2
    3
    4
    span::before{
      content: "123";
      color: #0f0;
    }

发表于 |
字数统计: 92 | 阅读时长 ≈ 1

选择器

1.后代元素选择器

1
2
3
div p {

}

2.直接子元素选择器

1
2
3
div > span{

}

3.属性选择器

1
2
3
[title^="one"]{

}

4.相邻兄弟选择器(后面元素)

1
2
3
span+p{

}

4.全部兄弟选择器(后面元素)

1
2
3
span~p{

}

5.交集选择器

1
2
3
div.one {

}

6.并集选择器

1
2
3
div, .one{

}