Merge branch 'master' of http://git.luyuan.tk/luyuan/webveuje

css
js
2020-12-31 10:22:27 +08:00 · 2021-01-05 09:18:22 +08:00 · 2021-01-04 14:13:00 +08:00 · 2021-01-04 09:38:03 +08:00 · 2020-12-31 10:22:15 +08:00 · 2020-12-31 09:56:58 +08:00
122 changed files with 5135 additions and 1 deletions
--- a/css/css简介.md
+++ b/css/css简介.md
@@ -0,0 +1,111 @@
 # css(层叠样式表)
 ### css 介绍	
 层叠样式表（**C**ascading **S**tyle **S**heet，简称：CSS）是为网页添加样式的代码。
 css 和html 类似，不是真正的编程语言，甚至不是标记语言，它是一门样式表语言，也就是说我们可以用它来选择性的为HTML元素添加样式
 ### css 使用
 	##### 	在html 中使用css
 - 行内样式
  在元素标签中写入<style> 属性，将样式写在属性中  
  格式为： style=" 属性1 : 值； 属性2 : 值；属性3 : 值；"多个属性用分号“ ; ”隔开。
 - 内联样式
  在<head>标签中加入<style>标签将CSS样式表写到该标签中。值后跟分号。
  格式：
  ```
  .class{ 
  	属性1 : 值；
  	属性2ytu : 值；
  	属性3 : 值 ；
  }
  ```
 - 外联样式
  在<head>标签中用<link>标签引入
  ```
    <link rel="stylesheet" type="text/css"  href="./css/layout.css" >
    <!--href中写css样式表存放的路径-->
  ```
 ####  css 语法
 	示例：
 ```
 p{
 	color:red
 }
 ```
 > p 是选择器，可以选择一个或多个html 元素
 >
 > color:red 整体是声明 。  一个单独的规则，用来指定添加样式元素的属性
 >
 > color 是属性（改 变HTML元素样式的途径），在等号左边 示例中的color 是p 元素的属性
 >
 > red 是属性值  在冒号右边 
 规则：
 > - 每个规则集，除了选择器部分，都应该包含在成对的大括号（{}）里
 > - 每个声明里要用冒号（:）将属性和属性值分隔开
 > - 每个规则集里 要用分号（;）将各个声明分隔开
 修改多个属性：
 ```
 p {
  color: red;
  width: 500px;
  border: 1px solid black;
 }
 ```
 ### css 选择器
 | 选择器名称               | 选择的内容                                       | 示例                                                    |
 | ------------------------ | ------------------------------------------------ | ------------------------------------------------------- |
 | 标签选择器（元素选择器） | 所有是这个标签的HTML元素                         | p   选择整个文件中的所有p 标签                          |
 | id选择器                 | 具有特定id 的html元素                            | #my  选择标签内id为‘my’的元素                           |
 | 类选择器                 | 带有class=''特定类的元素                         | .nav   选择标签内class="nav"的元素                      |
 | 属性选择器               | 拥有特定属性的元素                               | img[src=‘../a.jpg’] 选择<img src="xxx"/> 而不是 <img /> |
 | 伪类选择器               | 特殊状态下的特殊元素                             | a:hover  鼠标悬停在链接上时的样式                       |
 | 通用选择器               | 所有元素                                         | *                                                       |
 | E,F                      | 同时匹配所有的E和F元素，E，F之间用逗号分隔       | div , p{}                                               |
 | E F                      | 匹配所有属于E元素后代的F元素，E和F之间用空格分隔 | div p                                                   |
 | E>F                      | 匹配所有E元素的子元素F                           | div > p                                                 |
 | E+F                      | 匹配所有紧跟E元素之后的同级元素F                 | div+p                                                   |
 ####  css 伪类
 | 选择器        | 含义                      |
 | ------------- | ------------------------- |
 | E:first-child | 匹配父元素的第一个子元素  |
 | E:hover       | 鼠标悬停                  |
 | E:focus       | 获得焦点                  |
 | E:active      | 鼠标按下还没释放的元素    |
 | E:before      | 在E元素之前插入生成的内容 |
 | E:after       | 在E元素之后插入生成的内容 |
 p :hover{
 	color:red;	
 }
--- a/css/flex.md
+++ b/css/flex.md
@@ -0,0 +1,278 @@
 # flex
 网页布局（layout）是 CSS 的一个重点应用。
 ![img](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071001.gif)
 布局的传统解决方案，基于[盒状模型](https://developer.mozilla.org/en-US/docs/Web/CSS/box_model)，依赖 [`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/display) 属性 + [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position)属性 + [`float`](https://developer.mozilla.org/en-US/docs/Web/CSS/float)属性。它对于那些特殊布局非常不方便，比如，[垂直居中](https://css-tricks.com/centering-css-complete-guide/)就不容易实现。
 ![img](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071002.png)
 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
 ![img](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071003.jpg)
 Flex 布局将成为未来布局的首选方案。本文介绍它的语法，[下一篇文章](http://www.ruanyifeng.com/blog/2015/07/flex-examples.html)给出常见布局的 Flex 写法。网友 [JailBreak](http://vgee.cn/) 为本文的所有示例制作了 [Demo](http://static.vgee.cn/static/index.html)，也可以参考。
 以下内容主要参考了下面两篇文章：[A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) 和 [A Visual Guide to CSS3 Flexbox Properties](https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties)。
 ## 一、Flex 布局是什么？
 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
 任何一个容器都可以指定为 Flex 布局。
 > ```css
 > .box{
 >   display: flex;
 > }
 > ```
 行内元素也可以使用 Flex 布局。
 > ```css
 > .box{
 >   display: inline-flex;
 > }
 > ```
 Webkit 内核的浏览器，必须加上`-webkit`前缀。
 > ```css
 > .box{
 >   display: -webkit-flex; /* Safari */
 >   display: flex;
 > }
 > ```
 注意，设为 Flex 布局以后，子元素的`float`、`clear`和`vertical-align`属性将失效。
 ## 二、基本概念
 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
 ![img](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071004.png)
 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做`main start`，结束位置叫做`main end`；交叉轴的开始位置叫做`cross start`，结束位置叫做`cross end`。
 项目默认沿主轴排列。单个项目占据的主轴空间叫做`main size`，占据的交叉轴空间叫做`cross size`。
 ## 三、容器的属性
 以下6个属性设置在容器上。
 > - flex-direction
 > - flex-wrap
 > - flex-flow
 > - justify-content
 > - align-items
 > - align-content
 ### 3.1 flex-direction属性
 `flex-direction`属性决定主轴的方向（即项目的排列方向）。
 > ```css
 > .box {
 >   flex-direction: row | row-reverse | column | column-reverse;
 > }
 > ```
 ![img](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071005.png)
 它可能有4个值。
 > - `row`（默认值）：主轴为水平方向，起点在左端。
 > - `row-reverse`：主轴为水平方向，起点在右端。
 > - `column`：主轴为垂直方向，起点在上沿。
 > - `column-reverse`：主轴为垂直方向，起点在下沿。
 ### 3.2 flex-wrap属性
 默认情况下，项目都排在一条线（又称"轴线"）上。`flex-wrap`属性定义，如果一条轴线排不下，如何换行。
 ![img](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071006.png)
 > ```css
 > .box{
 >   flex-wrap: nowrap | wrap | wrap-reverse;
 > }
 > ```
 它可能取三个值。
 （1）`nowrap`（默认）：不换行。
 ![img](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071007.png)
 （2）`wrap`：换行，第一行在上方。
 ![img](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071008.jpg)
 （3）`wrap-reverse`：换行，第一行在下方。
 ![img](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071009.jpg)
 ### 3.3 flex-flow
 `flex-flow`属性是`flex-direction`属性和`flex-wrap`属性的简写形式，默认值为`row nowrap`。
 > ```css
 > .box {
 >   flex-flow: <flex-direction> || <flex-wrap>;
 > }
 > ```
 ### 3.4 justify-content属性
 `justify-content`属性定义了项目在主轴上的对齐方式。
 > ```css
 > .box {
 >   justify-content: flex-start | flex-end | center | space-between | space-around;
 > }
 > ```
 ![img](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071010.png)
 它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
 > - `flex-start`（默认值）：左对齐
 > - `flex-end`：右对齐
 > - `center`： 居中
 > - `space-between`：两端对齐，项目之间的间隔都相等。
 > - `space-around`：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
 ### 3.5 align-items属性
 `align-items`属性定义项目在交叉轴上如何对齐。
 > ```css
 > .box {
 >   align-items: flex-start | flex-end | center | baseline | stretch;
 > }
 > ```
 ![img](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071011.png)
 它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
 > - `flex-start`：交叉轴的起点对齐。
 > - `flex-end`：交叉轴的终点对齐。
 > - `center`：交叉轴的中点对齐。
 > - `baseline`: 项目的第一行文字的基线对齐。
 > - `stretch`（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
 ### 3.6 align-content属性
 `align-content`属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
 > ```css
 > .box {
 >   align-content: flex-start | flex-end | center | space-between | space-around | stretch;
 > }
 > ```
 ![img](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071012.png)
 该属性可能取6个值。
 > - `flex-start`：与交叉轴的起点对齐。
 > - `flex-end`：与交叉轴的终点对齐。
 > - `center`：与交叉轴的中点对齐。
 > - `space-between`：与交叉轴两端对齐，轴线之间的间隔平均分布。
 > - `space-around`：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
 > - `stretch`（默认值）：轴线占满整个交叉轴。
 ### 四、项目的属性
 以下6个属性设置在项目上。
 > - `order`
 > - `flex-grow`
 > - `flex-shrink`
 > - `flex-basis`
 > - `flex`
 > - `align-self`
 ### 4.1 order属性
 `order`属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
 > ```css
 > .item {
 >   order: <integer>;
 > }
 > ```
 ![img](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071013.png)
 ### 4.2 flex-grow属性
 `flex-grow`属性定义项目的放大比例，默认为`0`，即如果存在剩余空间，也不放大。
 > ```css
 > .item {
 >   flex-grow: <number>; /* default 0 */
 > }
 > ```
 ![img](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071014.png)
 如果所有项目的`flex-grow`属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的`flex-grow`属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
 ### 4.3 flex-shrink属性
 `flex-shrink`属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
 > ```css
 > .item {
 >   flex-shrink: <number>; /* default 1 */
 > }
 > ```
 ![img](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071015.jpg)
 如果所有项目的`flex-shrink`属性都为1，当空间不足时，都将等比例缩小。如果一个项目的`flex-shrink`属性为0，其他项目都为1，则空间不足时，前者不缩小。
 负值对该属性无效。
 ### 4.4 flex-basis属性
 `flex-basis`属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为`auto`，即项目的本来大小。
 > ```css
 > .item {
 >   flex-basis: <length> | auto; /* default auto */
 > }
 > ```
 它可以设为跟`width`或`height`属性一样的值（比如350px），则项目将占据固定空间。
 ### 4.5 flex属性
 `flex`属性是`flex-grow`, `flex-shrink` 和 `flex-basis`的简写，默认值为`0 1 auto`。后两个属性可选。
 > ```css
 > .item {
 >   flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
 > }
 > ```
 该属性有两个快捷值：`auto` (`1 1 auto`) 和 none (`0 0 auto`)。
 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
 ### 4.6 align-self属性
 `align-self`属性允许单个项目有与其他项目不一样的对齐方式，可覆盖`align-items`属性。默认值为`auto`，表示继承父元素的`align-items`属性，如果没有父元素，则等同于`stretch`。
 > ```css
 > .item {
 >   align-self: auto | flex-start | flex-end | center | baseline | stretch;
 > }
 > ```
 ![img](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071016.png)
 该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
--- a/css/定位.assets/image-20201221095702906.png
+++ b/css/定位.assets/image-20201221095702906.png
--- a/css/定位.assets/image-20201221102916077.png
+++ b/css/定位.assets/image-20201221102916077.png
--- a/css/定位.assets/image-20201221103043181.png
+++ b/css/定位.assets/image-20201221103043181.png
--- a/css/定位.assets/image-20201221103321675.png
+++ b/css/定位.assets/image-20201221103321675.png
--- a/css/定位.assets/image-20201221104140216.png
+++ b/css/定位.assets/image-20201221104140216.png
--- a/css/定位.md
+++ b/css/定位.md
@@ -0,0 +1,318 @@
 # 定位
 ### 文档流
 	文档流就是HTML文档内所有元素按照一定规律排列并显示的形式。
 　CSS文档流大致可以分为3种：标准流，浮动流，定位流。
 - 标准流
  - 默认情况下，HTML元素都在标准流中呈现和展示。我们之前把元素分为块级元素，行内元素，行内块级元素，他们的特性是块级独占一行，行内和行内块级可以在一行内共存，这些特性都是针对标准流的。总结一下就是，标准流中元素只能在水平或垂直方向上排版。如果元素是块级元素, 那么就会垂直排版，如果元素是行内元素/行内块级元素, 那么就会水平排版。
 - 浮动流
  - 　浮动流只有一种排版方式, 就是水平排版。 它只能设置某个元素在父元素内左对齐或者右对齐。设置了浮动的元素，**将脱离标准流**，之后它将无视元素的display属性，并且都被当做块级元素处理。
 - 定位流
  	标准流和浮动流都只能在水平或垂直方向布局元素，但现实是，我们可能需要在上下左右几个方向上同时偏移元素，定位流正是为了解决这一问题而设计的。通过设置元素的position属性，可以让元素处于定为流中，并通过left、right、top、bottom属性设置元素具体的偏移量。
  　　定为流分为四种：
  　　　　a) static 静态定位，实际上所有元素默认都是静态定位的，即处于标准流中。
  　　　　b) relative 相对定位，元素保留在标准流中所占用的位置，但实际是**边框及以内的部分将显示在偏移之后的位置**。即虽然元素已经不再原来的位置了，`但之前所占用的空间并不会被释放给其他标准流中的元素`。
  　　　　c) absolute 绝对定位，元素脱离标准流，浏览器把它视作块级元素，不论定位之前它是何种元素，其他元素也将无视它。绝对定位的偏移量是相对于其**有定位属性的第一个祖先元素的**。
  　　　　d) fixed 固定定位，固定定位和绝对定位相似，但它的偏移量固定的相对于浏览器窗口。
 ### position 应用
 > 	position 属性用来指定一个元素在网页上的位置 ，一共有5种定位方式
 - **static  (默认)**
 - **relative**
 - **fixed**
 - **absolute**
 - sticky
 #### 属性详解
 #### static
 ------
 static 是position 属性的默认值，这个值使指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置，此时top, right, bottom, left和z-index 都无效
 示例：
 html
 ```
 <!DOCTYPE html>
 <html lang="en">
 <head>     
    <meta charset="UTF-8">    
    <title>Title</title> 
 <body>     
    <div class="content">         
        <div class="box" id="one">One</div>        
 		 <div class="box" id="two">Two</div>         
        <div class="box" id="three">Three</div>         
        <div class="box" id="four">Four</div>     
   	</div> 
 </body> 
 </html>
 ```
 css
 ```
    .box {
        display: inline-block;  // 容器内的元素水平排列
        width: 100px;
        height: 100px;
        background: red;
        color: white;
    }
    #two {
        position: static;
        top: 20px;
        left: 20px;
        bottom:1px;
        right:9px
        background: blue;
    }
 ```
 ![image-20201221095702906](定位.assets/image-20201221095702906.png)
 ##### **position:static** 
 <font color="red" size=5>**top,left,right,bottom无效**</font>
 #### relative
 ------
 relative 表示，相对于默认位置（即 static 时的位置）进行偏移，即定位基点是元素的默认位置。 它必须搭配 top、bottom、left、right 这四个属性一起使用，用来指定偏移的方向和距离。
 示例：
 html不变
 css改为：
 ```
 .box {
        display: inline-block;
        width: 100px;
        height: 100px;
        background: red;
        color: white;
    }
    #two {
        position: relative;
        top: 20px;
        left: 20px;
        background: blue;
    }
 ```
 ![image-20201221102916077](定位.assets/image-20201221102916077.png)
 #### absolute
 ------
 absolute 表示，相对于上级元素（一般是父元素）进行偏移，即定位基点是父元素。
 **它有一个重要的限制条件：定位基点（一般是父元素）不能是 static 定位，否则定位基点就会变成整个网页的根元素 html。**
 另外，absolute 定位也必须搭配 top、bottom、left、right 这四个属性一起使用。
 示例：
 html 不变 css 改为：
 父元素static定位 子元素 absolute定位
 ```
 .content {
        margin-left: 100px;
        border: 2px solid blue;
    }
    .box {
        display: inline-block;
        width: 100px;
        height: 100px;
        background: red;
        color: white;
    }
    #two {
        position: absolute;
        top: 20px;
        left: 20px;
        background: blue;
    }
 ```
 ![image-20201221103043181](定位.assets/image-20201221103043181.png)
 <font color="red">**此时 子元素相对于body定位**</font>
 父元素relative 定位 子元素absolute定位
 css 改为：
 ```
   .content {
        margin-left: 100px;
        border: 2px solid blue;
    }
    .box {
        display: inline-block;
        width: 100px;
        height: 100px;
        background: red;
        color: white;
    }
    #two {
        position: absolute;
        top: 20px;
        left: 20px;
        background: blue;
    }
 ```
 ![image-20201221103321675](定位.assets/image-20201221103321675.png)
 <font color="red">**此时子元素根据父元素定位**</font>
 #### fixed
 ------
 fixed 表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。
 元素的位置通过 left、top、right 以及 bottom 属性进行规定。
 示例：
 ```
 <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/html">
 <head>
    <meta charset="UTF-8">
    <title>Title</title>
 </head>
 <body>
    <div class="content">
        <div class="header">Header</div>
        <div class="blank"></div>
        <p>
            我是内容~ <br/>
            我是内容~ <br/>
            我是内容~ <br/>
            我是内容~ <br/>
            我是内容~ <br/>
            我是内容~ <br/>
            我是内容~ <br/>
            我是内容~ <br/>
            我是内容~ <br/>
            我是内容~ <br/>
            我是内容~ <br/>
            我是内容~ <br/>
            我是内容~ <br/>
            我是内容~ <br/>
            我是内容~ <br/>
            我是内容~ <br/>
            我是内容~ <br/>
        </p>
    </div>
 </body>
 </html>
 ```
 css:
 ```
   .content {
        width: 500px;
        height: 200px;
        overflow: scroll;
    }
    .header {
        width: 100%;
        height: 50px;
        background: red;
        color: white;
        position: fixed;
    }
    p {
        margin-top: 50px;
    }
 ```
 ![image-20201221104140216](定位.assets/image-20201221104140216.png)
 #### sticky 
 ------
 sticky 跟前面四个属性值都不一样，它会产生动态效果，很像 relative 和 fixed 的结合：一些时候是 relative 定位（定位基点是自身默认位置），另一些时候自动变成 fixed 定位（定位基点是视口）。比如型表格滚动的时候，表头始终固定。
 sticky 生效的前提是，必须搭配 top、bottom、left、right 这四个属性一起使用，不能省略，否则等同于 relative 定位，不产生"动态固定"的效果。原因是这四个属性用来定义"偏移距离"，浏览器把它当作 sticky 的生效门槛
 ## 常用的display属性 
 1. block 指定元素为块级元素   块级元素（如div）的display属性的默认值
 2. inline 指定元素为行内元素   内联元素（如span,a...able）的display的默认值
   > 在块级元素中指定display:inline 能将此元素转换成内联元素
   >
   > 在内联元素中指定 display:block  能将此元素转换成块级元素
 3. flex 详情至弹性盒子 指定元素为弹性盒子
 4. grid 详情自行探索网格布局（grid）
 5. table 指定元素为table 
--- a/css/弹性盒子.assets/image-20201218164425451.png
+++ b/css/弹性盒子.assets/image-20201218164425451.png
--- a/css/弹性盒子.assets/image-20201218165134275.png
+++ b/css/弹性盒子.assets/image-20201218165134275.png
--- a/css/弹性盒子.assets/image-20201218165414077.png
+++ b/css/弹性盒子.assets/image-20201218165414077.png
--- a/css/弹性盒子.assets/image-20201218165546847.png
+++ b/css/弹性盒子.assets/image-20201218165546847.png
--- a/css/弹性盒子.assets/image-20201218165635626.png
+++ b/css/弹性盒子.assets/image-20201218165635626.png
--- a/css/弹性盒子.assets/image-20201218165726666.png
+++ b/css/弹性盒子.assets/image-20201218165726666.png
--- a/css/弹性盒子.assets/image-20201218170008166.png
+++ b/css/弹性盒子.assets/image-20201218170008166.png
--- a/css/弹性盒子.md
+++ b/css/弹性盒子.md
@@ -0,0 +1,146 @@
 #  弹性盒子（flex）
 ### flex 简介
 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
 任一个容器都可以指定为 Flex 布局。
 #### 将一个html元素定义为flex 元素
 > 使用 display: flex;
 >
 > 内联元素使用  display: inline-flex;
 示例：
 ```
 .box{
  display: flex;
 }
 ```
 内联元素：
 ```
 .box{
  display: inline-flex;
 }
 ```
 ### 基本概念
 >  采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
 容器内默认存在两根轴 分别是水平的主轴（main axis）和垂直的交叉轴(cross axis)
 主轴的开始位置与容器边框的交叉点叫做main start 结束点叫做 main end 
 交叉轴的开始位置与容器边框的交叉点叫做 cross start  结束位置叫做 cross end
 默认容器成员沿主轴排列，单个容器成员占据的空间叫做main-size
 单个容器成员占据垂直交叉轴的控件叫做cross-size
 ![image-20201218164425451](弹性盒子.assets/image-20201218164425451.png)
 ### 常用属性
 - flex-direction:row;/column
 - flex-wrap
 - flex-flow
 - justify-content
 - align-items
 - align-content
 ### 常用属性详解
 	#### 	flex-direction
 	作用： 决定主轴方向
 	属性值： 
 - `row`（默认值）：主轴为水平方向，起点在左端。
 - `row-reverse`：主轴为水平方向，起点在右端。
 - `column`：主轴为垂直方向，起点在上沿。
 - `column-reverse`：主轴为垂直方向，起点在下沿。
 ```
 .box {
  flex-direction: row | row-reverse | column | column-reverse;
 }
 ```
 ![image-20201218165134275](弹性盒子.assets/image-20201218165134275.png)
 #### justify-content
 作用： 定义了容器成员在主轴方向上的对齐方式
 ```
 .box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
 }
 ```
 ![image-20201218165414077](弹性盒子.assets/image-20201218165414077.png)
 #### flex-wrap
 ```css
 .box{
  flex-wrap: nowrap | wrap | wrap-reverse;
 }
 ```
 属性值：
 - nowrap  不换行
  ![image-20201218165546847](弹性盒子.assets/image-20201218165546847.png)
 - wrap 换行 第一行在上方
  ![image-20201218165635626](弹性盒子.assets/image-20201218165635626.png)
 - wrap-reverse ：换行，第一行在下方。
 ![image-20201218165726666](弹性盒子.assets/image-20201218165726666.png)
 #### align-item
 作用：定义容器成员在交叉轴上的对齐方式
 ```css
 .box {
  align-items: flex-start | flex-end | center | baseline | stretch;
 }
 ```
 ![image-20201218170008166](弹性盒子.assets/image-20201218170008166.png)
 #### align-self 
 允许单个容器成员拥有与其他成员不一样的对齐方式，可以覆盖align-items属性，默认值为auto 
--- a/css/盒模型.assets/3EXWM8R]ILQ_Z_WU]KU%1SM-1608278714392.png
+++ b/css/盒模型.assets/3EXWM8R]ILQ_Z_WU]KU%1SM-1608278714392.png
--- a/css/盒模型.assets/image-20201218160440679.png
+++ b/css/盒模型.assets/image-20201218160440679.png
--- a/css/盒模型.md
+++ b/css/盒模型.md
@@ -0,0 +1,55 @@
 # css盒模型 
 ### 盒模型简介
 CSS css盒子模型 又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如图：
 ![image-20201218160440679](盒模型.assets/image-20201218160440679.png)
 ![img](盒模型.assets/3EXWM8R]ILQ_Z_WU]KU%1SM-1608278714392.png)
 > 图中的最内侧灰色的部分是元素的实际内容
 >
 > 紧挨着元素框外部的是内边距padding ,其次是边框
 >
 > 最外侧是外边距margin
 >
 > 通常设置背景色生效的部分是元素内容+padding的范围+边框
 >
 > 外边框margin 是透明的，不会遮挡周边元素
 > 元素的总宽度= 元素的width+左右padding +左右margin+border的左右宽度
 >
 > 元素的总高度=元素的height+上下padding + 上下margin+border的上下宽度
 ### 与盒模型相关的css属性
 	box-sizing 
 	说明:允许您以特定的方式定义匹配某个区域的特定元素
 	语法：box-sizing:content-box|border-box
 	属性值：
 - content-box:
  padding值和border值不计算到内容（content）的宽度之内
  即：一个盒子模型的总宽度=margin+padding+border+width;
 - border-box:
  content的值包含了padding值和border值
  即：一个盒子的总宽度=margin+width.
 - padding-box：将padding算入width范围
--- a/css/自适应和响应式.assets/image-20201221112132098.png
+++ b/css/自适应和响应式.assets/image-20201221112132098.png
--- a/css/自适应和响应式.assets/image-20201221112409483.png
+++ b/css/自适应和响应式.assets/image-20201221112409483.png
--- a/css/自适应和响应式.assets/image-20201221143946222.png
+++ b/css/自适应和响应式.assets/image-20201221143946222.png
--- a/css/自适应和响应式.md
+++ b/css/自适应和响应式.md
@@ -0,0 +1,222 @@
 # 自适应和响应式（移动端适配）
 ### 是什么
 什么是自适应布局：同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整网页内容大小。
 什么是响应式布局：可以自动识别屏幕宽度、并做出相应调整的网页设计，布局和展示的内容可能会有所变动。
 区别：如果网页内容过多，整体会显得拥挤。所以响应式布局是自适应布局的改进，布局和展示的内容可能会有所变动。
 ### 为什么
 - 屏幕显示器的分辨率越来越多样化，在pc端和手机端需要做样式上的平衡，如果每个屏显都需要一套独立的网页或者样式，会加大工作量
 - 单纯使用meta-viewport虽然可以解决部分问题，但是单纯的进行缩放，达到的平衡点，用户体验不佳
 如携程的pc 和手机版效果
 ![image-20201221112132098](自适应和响应式.assets/image-20201221112132098.png)
 segmentfault网站的响应式布局：
 ![image-20201221112409483](自适应和响应式.assets/image-20201221112409483.png)
 如果想要更好的用户体验，建议使用响应式布局
 ### 怎么做
 1.  媒体查询（media query）	
   	媒体查询就是对设备按照某些条件进行查询，使符合条件的设备显示对应的样式  从而实现不同设备样式不同的效果
   语法：
   @media (max-width: 屏幕最大宽度){
   	...  符合条件的样式  跟style样式表一样 含多个元素样式
   }
   示例：
   ```
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Document</title>
       <style>
            @media (max-width: 960px){ /*屏幕宽度为0~960的样式*/
               body{
                   background: gold;
               }
            }
            @media (max-width: 760px){ /*屏幕宽度为0~760的样式*/
               body{
                   background: pink;
               }
            }
            @media (max-width: 640px){ /*屏幕宽度为0~640的样式*/
               body{
                   background: pink;
               }
            }
            @media (max-width: 520px){ /*屏幕宽度为0~520的样式*/
               body{
                   background: blue;
               }
            }
            @media (max-width: 480px){ /*屏幕宽度为0~480的样式*/
               body{
                   background:gray
               }
            }
       </style>
   </head>
   <body>
   </body>
   </html>
   ```
 效果参考b.html 运行
 2.  百分比布局
   通过百分比单位 " % " 来实现响应式的效果。 比如当浏览器的宽度或者高度发生变化时，通过百分比单位，可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果
   示例：
   ```
   <!DOCTYPE html>  
     <!--  -->
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Document</title>
       <style>
           .box{
              width: 900px;
              height: 600px;
              background:orange;
           }
           .item1{
               width: 40%;
               height:80%;
               background: paleturquoise;
               float: left;
           }
           .item2{
               width:40%;
               height: 80%;
               background: blue;
               float: right;
           }
       </style>
   </head>
   <body>
     <div class="box">
         <div class="item1"></div>
         <div class="item2"></div>
     </div>
   </body>
   </html>
   ```
   ![image-20201221143946222](自适应和响应式.assets/image-20201221143946222.png)
 3. rem
   rem是一个相对单位，1rem等于html元素上字体设置的大小。我们只要设置html上font-size的大小，就可以改变rem所代表的大小。**其实rem布局的本质是等比缩放，一般是基于宽度**.
   这样我们就有了一个可控的统一参考系。我们现在有两个目标：
   - rem单位所代表的尺寸大小和屏幕宽度成正比，也就是设置html元素的font-size和屏幕宽度成正比
   - rem单位和px单位很容易进行换算，方便我们按照标注稿写css
 使用：
 借助js
 ```
 //designWidth:设计稿的实际宽度值，需要根据实际设置
 //maxWidth:制作稿的最大宽度值，需要根据实际设置
 //这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
 ;(function(designWidth, maxWidth) {
 	var doc = document,
 	win = window,
 	docEl = doc.documentElement,
 	remStyle = document.createElement("style"),
 	tid;
 	function refreshRem() {
 		var width = docEl.getBoundingClientRect().width;
 		maxWidth = maxWidth || 540;
 		width>maxWidth && (width=maxWidth);
 		var rem = width * 100 / designWidth;
 		remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
 	}
 	if (docEl.firstElementChild) {
 		docEl.firstElementChild.appendChild(remStyle);
 	} else {
 		var wrap = doc.createElement("div");
 		wrap.appendChild(remStyle);
 		doc.write(wrap.innerHTML);
 		wrap = null;
 	}
 	//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
 	refreshRem();
 	win.addEventListener("resize", function() {
 		clearTimeout(tid); //防止执行两次
 		tid = setTimeout(refreshRem, 300);
 	}, false);
 	win.addEventListener("pageshow", function(e) {
 		if (e.persisted) { // 浏览器后退的时候重新计算
 			clearTimeout(tid);
 			tid = setTimeout(refreshRem, 300);
 		}
 	}, false);
 	if (doc.readyState === "complete") {
 		doc.body.style.fontSize = "16px";
 	} else {
 		doc.addEventListener("DOMContentLoaded", function(e) {
 			doc.body.style.fontSize = "16px";
 		}, false);
 	}
 })(750, 750);
 /*
 	第一个参数是设计稿的宽度，一般设计稿有640，或者是750，你可以根据实际调整
 	第二个参数则是设置制作稿的最大宽度，超过750，则以750为最大限制。
 */
 ```
 1.复制上面这段代码到你的页面的头部的script标签的最前面。
 2.根据设计稿大小，调整里面的最后两个参数值。
 3.使用1rem=100px转换你的设计稿的像素，例如设计稿上某个块是100px*300px,换算成rem则为1rem*3rem。
--- a/csspress/1.css基础.md
+++ b/csspress/1.css基础.md
@@ -0,0 +1,157 @@
 # css 基础
 ## 定义
 css(层级样式表， Cascading Style Sheets) 是一种样式表语言，用来描述HTML或XML 文档的呈现，他和html一样都不是编程语言，他甚至不是标记语言，他是一门样式表语言 。我们用来给html的元素选择性的添加样式
 ## 在页面中使用css
 方式1（行内样式）：
 在html标签中 用style属性 给选中元素写入css样式
 ```
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 </head>
 <body style="background:blue">
    <p>hello world</p>
 </body>
 </html>
 ```
 效果如下：
 ![image-20201230160237854](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201230160237854.png)
 方式2（内部样式表）：
 在head 标签中写入 style标签，然后从style标签内写css的内容
 ```
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background:blue
        }
    </style>
 </head>
 <body>
    <p>hello world</p>
 </body>
 </html>
 ```
 效果如下：
 ![image-20201230160237854](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201230160237854.png)
 方式3 （外部样式表）
 从head标签中 通过link 标签引入外部的css文件 从而建立html文件和css文件之间的连接
 > <link rel="stylesheet" href="./css/index.css">
 >
 > link 标签中的rel=“stylesheet”必须加上
 >
 > href 为url地址
 >
 > type 链接文件的格式  可省略 省略的部分为：type="text/css"
 >
 > rel属性规定当前文档与被连接文档之间的关系，但是只有值为stylesheet的时候，能够得到浏览器的支持
 ```
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
 </head>
 <body>
    <p>hello world</p>
 </body>
 </html>
 ```
 效果同上：
 ![image-20201230160447459](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201230160447459.png)
 ## css 语法
 那让我们解读一下刚才写的css代码
 ```
 body{
 	background:blue
 }
 ```
 其中 body 叫选择器，可以选中一个或多个需要添加此样式的元素，这个例子中是body  如果要给不同的元素添加样式，只需要更改选择器部分就可以了
 {} 内部的内容为规则集，css中除了选择器部分，样式相关的所有内容全部要包括在成对的大括号里（{}）
 {} 中的一行为一个声明，声明由 属性:属性值 组成，用来指定添加样式元素的属性 如本例的background:blue
 声明中冒号左边的部分为属性，冒号右边的部分为属性值
 重要的语法归纳：
 - 除了选择器的部分都应该包含在成对的大括号里，即{} 里面
 - 每个声明中要用 : 将属性名和属性值分割开
 - 每个规则集中，要用 ; 把各个声明分割开
 ## css选择器
 基本选择器：
 | 选择器名称              | 选中的内容                 | 示例                                                         |
 | ----------------------- | -------------------------- | ------------------------------------------------------------ |
 | 标签选择器              | 页面上所有该标签的html元素 | p 选中页面上所有的p标签                                      |
 | id选择器                | 具有特定id的html元素       | #name 选中页面上所有<p id="name ">或<span id=“name"> ...这种id为name 的元素 |
 | 类选择器                | 具有特定类的元素           | .box  选中页面上所有<p class="box">或<span class=“box">... 这种class 为box的元素 |
 | 属性选择器              | 具有特定属性的元素         | a[title]  选中页面上所有存在title属性的<a>元素 并且可以通过a[title='xxx']来匹配特定的属性值 |
 | 通配符                  | 所有元素                   | *                                                            |
 | 多个元素                | 不同选择器用 , 连接        | div,span 同时匹配到页面中所有的div和span元素                 |
 | 选择后代元素            | 用空格连接 A B             | div span 匹配所有div中的所有span元素                         |
 | 伪类            ：hover | a:hover                    | 匹配所有鼠标移入状态下的a标签                                |
 ## css 优先级
 优先级是分配给指定css声明的一个权重，只有多个样式规则赋给同一个元素而且定义的属性有冲突的时候，优先级才有意义
 1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
 2. 作为style属性写在元素内的样式
 3. id选择器
 4. 类选择器
 5. 标签选择器
 6. 通配符选择器
 7. 浏览器自定义或继承
   **总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性**
--- a/csspress/2.盒模型.md
+++ b/csspress/2.盒模型.md
@@ -0,0 +1,61 @@
 # css 基础（二）
 ## 块级元素和内联元素
 - 块级元素
  - 特点：
    - 盒子横向会占据父元素所有的空间，默认情况下，盒子会和父元素一样宽
    - 每个盒子都会换行
    - width和height 都可以发挥作用
    - padding , margin, border 会将其他元素从当前盒子周围推开
 - 内联元素
  - 特点：
    - 盒子不会换行
    - width和height 不能发挥作用
    - 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 `inline` 状态的盒子推开。
    - 水平方向的内边距、外边距以及边框会被应用且会把其他处于 `inline` 状态的盒子推开。
 > 块级元素display默认属性值为 block   
 >
 > 内联元素 dipslay的属性默认值为inline
 >
 > 块级元素和内联元素可以通过display="inline"/"block"  实现互相转换
 ## 盒模型 （box model）
 css 盒模型包括如下要素
 - 元素内容 （content）
 - 内边距 （border）
 - 边框（border）
 - 外边距（margin）
 ![image-20201218160440679](E:\web\测试lesson\kejian\css\盒模型.assets\image-20201218160440679.png)
 ![image-20210104085742577](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210104085742577.png)
 > 上图中 最内层的蓝色色块是 元素内容（content）
 >
 > 蓝色外侧的 绿色的是内边距（padding）
 >
 > padding外侧的橙黄色的部分是边框（border）
 >
 > border 外侧 也就是最外侧的部分是外边框（margin）
 盒模型计算元素的总宽度和总高度：
 > 元素的总宽度= 元素的width+左右padding +左右margin+border的左右宽度
 >
 > 元素的总高度=元素的height+上下padding + 上下margin+border的上下宽度
--- a/csspress/3.定位.md
+++ b/csspress/3.定位.md
@@ -0,0 +1,251 @@
 # 定位(position)
 position 用来定义元素在网页上的位置，常用的有五种：
 - static				正常的页面流，position属性的默认值
 - absolute          绝对定位                       
 - relative            相对定位
 - fixed                 固定定位
 - sticky                粘性布局
 ### static 
 这时浏览器会按照源码的顺序决定元素的位置，这样称为“正常的页面流”。块级元素占据自己的区块，元素之间不重叠。
 ![image-20210104095232481](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210104095232481.png)
 html：
 <body>
    <div></div>
    <div></div>
    <div></div>
 </body>
 css：
 ```
 <style>
 /*
 	去掉浏览器默认的标签自带样式
 */
        *{
            margin:0;
            padding: 0;
        }
 /*
 	position不写默认是static
 */
        div{
            width:60px;
            height: 60px;
            background:red
        }
    </style>
 ```
 ### absolute
 absolute 基于父元素定位，通过 top,bottom,left,right 四个属性规定元素的位置
 当父元素不定义position属性时，选中的元素依照整个网页的html根元素定位
 ![image-20210104101111002](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210104101111002.png)
 html 不变 css如下：
 ```
 *{
    margin:0;
    padding: 0;
 }
 div{
    width:60px;
    height: 60px;
    background:red;
 }
 .box1{
    background: gray;
    position: absolute;
 }
 ```
 上面的例子里，第一个灰色的div（以下叫A）并没有出现在页面上，因为这时候给A 添加了position:absolute 属性，使他脱离正常的文档流  然后他下面（从上到下依次叫B,C），B,C并没有脱离文档流，所以会移动到上面来，把A覆盖
 ![image-20210104102616301](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210104102616301.png)
 html：
 ```
 <body>
    <div class="box1"></div>
    <div></div>
    <div></div>
 </body>
 ```
 css:
 ```
 <style>
        *{
            margin:0;
            padding: 0;
        }
        div{
            width:60px;
            height: 60px;
            background:red;
        }
        .box1{
            background: gray;
            position: absolute;
            right:0px;
        }
    </style>
 ```
 ### relative
 相对定位，选中元素不会脱离文档流，相对于其自身位置进行移动，通过top,bottom,left,right 属性进行规定
 ![image-20210104104339420](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210104104339420.png)
 ```
 <style>
        *{
            margin:0;
            padding: 0;
        }
        div{
            width:60px;
            height: 60px;
            background:red;
        }
        .box1{
            background: gray;
            position: absolute;
            right:90px;
        }
    </style>
 ```
 > 常用技巧是给父元素定义绝对定位  子元素定义相对定位   这样就会使子元素相对于父元素定位
 ### fixed
 fixed 固定定位，将某个元素固定在浏览器的某个位置，无论如何滚动滚动条，元素位置不变。 即元素相对于可视窗口固定位置
 html:
 ```
 <body>
    <div class="box1"></div>
    <div></div>
    <div class="box2"></div>
 </body>
 ```
 css:
 ```
 <style>
        *{
            margin:0;
            padding: 0;
        }
        div{
            width:60px;
            height: 600px;
            background:red;
        }
        .box1{
            background: gray;
            position: fixed;
            left: 90px;
            height: 60px;
        }
        .box2{
            background: gold;
        }
    </style>
 ```
 ![image-20210104113658613](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210104113658613.png)
 ### sticky 粘性布局（拓展）
 从效果来说 sticky更像是混合体，使用sticky的元素在页面滑动到临界点之前，表现为relative,  到达临界点之后，表现为fixed
 #### css 使用：
 > 1. 用 position: sticky 声明目标元素
 > 2. top/bottom/left/right   任意一个赋予有效值 ，甚至是负值也可以
 注： 如果元素定义了overflow，那么sticky就会失效
 html:
 ```
 <body>
    <div class="box1"></div>
    <div></div>
    <div class="box2"></div>
 </body>
 ```
 css:
 ```
 <style>
        *{
            margin:0;
            padding: 0;
        }
        div{
            width:60px;
            height: 600px;
            background:red;
        }
        .box1{
            background: gray;
            height: 60px;
            position: sticky;
            top: 10px;
        }
        .box2{
            background: gold;
        }
    </style>
 ```
 滚动前：
 ![image-20210104115013701](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210104115013701.png)
 滚动后：
 ![image-20210104115040341](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210104115040341.png)
--- a/csspress/4.flex.md
+++ b/csspress/4.flex.md
@@ -0,0 +1,46 @@
 # flex
 flex 意为弹性盒子，用来为盒模型提供最大的灵活性
 ### flex 使用
 任何一个元素都能被指定为flex 容器
 ```
 /*
 	选中元素为块级元素时
 */
 display:flex
 /*
 	选中元素为内联元素时
 */
 display:inline-flex
 ```
 ### 基本概念
 通过display:flex 定义的元素称为容器，他包含的元素是容器成员，称为”项目“
 容器默认存在两个轴，水平主轴和垂直的交叉轴
 水平主轴的起点叫做 main start   结束位置叫做 main end
 垂直交叉轴的起点叫做 cross start  结束位置叫做  cross end
 ### 容器的属性
 - flex-direction  声明容器使用的轴是水平的还是垂直的
  - row 水平
  - column 垂直
 - justify-content 声明排列的方式
  - center  居中
  - space-around   每个项目两侧的间隔相等  项目到边框有间距
  - space-between 两端对齐  项目之间的间隔都相等
 - align-items 定义项目在交叉轴上的排列方式
  - center  居中
  - flex-start 交叉轴起点对齐（拓展）
  - flex-end 交叉轴终点对齐
  - baseline 第一行文字的基线对齐
  - stretch  默认占满整个容器的高度
--- a/csspress/5.自适应和响应式.md
+++ b/csspress/5.自适应和响应式.md
@@ -0,0 +1,199 @@
 # 自适应和响应式
 为了适配移动端终端设备
 ### 实现途径：
 1.媒体查询
 将设备按照不同的分辨率条件筛选，使符合条件的设备显示对应的样式，从而实现不同分辨率样式不同的效果
 语法：
 ```
@media (max-width: 屏幕最大宽度){
 	...  符合条件的样式  跟style样式表一样 含多个元素样式
 }
 ```
 示例：
 ```
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         @media (max-width: 960px){ /*屏幕宽度为0~960的样式*/
            body{
                background: gold;
            }
         }
         @media (max-width: 760px){ /*屏幕宽度为0~760的样式*/
            body{
                background: pink;
            }
         }
         @media (max-width: 640px){ /*屏幕宽度为0~640的样式*/
            body{
                background: pink;
            }
         }
         @media (max-width: 520px){ /*屏幕宽度为0~520的样式*/
            body{
                background: blue;
            }
         }
         @media (max-width: 480px){ /*屏幕宽度为0~480的样式*/
            body{
                background:gray
            }
         }
    </style>
 </head>
 <body>
 </body>
 </html>
 ```
 效果参考b.html
 > 使用媒体查询时，需要对应不同分辨率终端写多套所对应的样式，比较繁琐
 >
 2.百分比
 通过’%‘单位来实现响应式效果。浏览器高度和宽度发生变化时，通过百分比单位可以使元素的高和宽随着浏览器的变化而变化，从而实现响应式效果
 示例：
 ```
 <!DOCTYPE html>  
  <!--  -->
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
           width: 900px;
           height: 600px;
           background:orange;
        }
        .item1{
            width: 40%;
            height:80%;
            background: paleturquoise;
            float: left;
        }
        .item2{
            width:40%;
            height: 80%;
            background: blue;
            float: right;
        }
    </style>
 </head>
 <body>
  <div class="box">
      <div class="item1"></div>
      <div class="item2"></div>
  </div>
 </body>
 </html>
 ```
 ![image-20210105085706956](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210105085706956.png)
 > 使用百分比做单位时，如果要定义一个元素的宽高，需要根据设计稿手动计算 换算成% 单位，容易出现误差
 ### rem
 rem是一个相对单位，1rem等于html元素上字体设置的大小。我们只要设置html上font-size的大小，就可以改变rem所代表的大小。**其实rem布局的本质是等比缩放，一般是基于宽度**.
 这样我们就有了一个可控的统一参考系。我们现在有两个目标：
 - rem单位所代表的尺寸大小和屏幕宽度成正比，也就是设置html元素的font-size和屏幕宽度成正比
 - rem单位和px单位很容易进行换算，方便我们按照标注稿写css
 使用：
 借助js
 ```
 //designWidth:设计稿的实际宽度值，需要根据实际设置
 //maxWidth:制作稿的最大宽度值，需要根据实际设置
 //这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
 ;(function(designWidth, maxWidth) {
 	var doc = document,
 	win = window,
 	docEl = doc.documentElement,
 	remStyle = document.createElement("style"),
 	tid;
 	function refreshRem() {
 		var width = docEl.getBoundingClientRect().width;
 		maxWidth = maxWidth || 540;
 		width>maxWidth && (width=maxWidth);
 		var rem = width * 100 / designWidth;
 		remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
 	}
 	if (docEl.firstElementChild) {
 		docEl.firstElementChild.appendChild(remStyle);
 	} else {
 		var wrap = doc.createElement("div");
 		wrap.appendChild(remStyle);
 		doc.write(wrap.innerHTML);
 		wrap = null;
 	}
 	//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
 	refreshRem();
 	win.addEventListener("resize", function() {
 		clearTimeout(tid); //防止执行两次
 		tid = setTimeout(refreshRem, 300);
 	}, false);
 	win.addEventListener("pageshow", function(e) {
 		if (e.persisted) { // 浏览器后退的时候重新计算
 			clearTimeout(tid);
 			tid = setTimeout(refreshRem, 300);
 		}
 	}, false);
 	if (doc.readyState === "complete") {
 		doc.body.style.fontSize = "16px";
 	} else {
 		doc.addEventListener("DOMContentLoaded", function(e) {
 			doc.body.style.fontSize = "16px";
 		}, false);
 	}
 })(750, 750);
 /*
 	第一个参数是设计稿的宽度，一般设计稿有640，或者是750，你可以根据实际调整
 	第二个参数则是设置制作稿的最大宽度，超过750，则以750为最大限制。
 */
 ```
 1.复制上面这段代码到你的页面的头部的script标签的最前面。
 2.根据设计稿大小，调整里面的最后两个参数值。
 3.使用1rem=100px转换你的设计稿的像素，例如设计稿上某个块是100px*300px,换算成rem则为1rem*3rem。
--- a/csspress/demo/a.html
+++ b/csspress/demo/a.html
@@ -0,0 +1,32 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        div{
            width:60px;
            height: 600px;
            background:red;
        }
        .box1{
            background: gray;
            height: 60px;
            position: sticky;top: 10px;
        }
        .box2{
            background: gold;
        }
    </style>
 </head>
 <body>
    <div class="box1"></div>
    <div></div>
    <div class="box2"></div>
 </body>
 </html>
--- a/csspress/demo/b.html
+++ b/csspress/demo/b.html
@@ -0,0 +1,36 @@
 <!DOCTYPE html>  
  <!--  -->
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
           width: 900px;
           height: 600px;
           background:orange;
        }
        .item1{
            width: 40%;
            height:80%;
            background: paleturquoise;
            float: left;
        }
        .item2{
            width:40%;
            height: 80%;
            background: blue;
            float: right;
        }
    </style>
 </head>
 <body>
  <div class="box">
      <div class="item1"></div>
      <div class="item2"></div>
  </div>
 </body>
 </html>
--- a/html/html.assets/image-20201217105145904-1608173514959.png
+++ b/html/html.assets/image-20201217105145904-1608173514959.png
--- a/html/html.assets/image-20201217113857619.png
+++ b/html/html.assets/image-20201217113857619.png
--- a/html/html.assets/image-20201217141653532.png
+++ b/html/html.assets/image-20201217141653532.png
--- a/html/html简介.md
+++ b/html/html简介.md
@@ -0,0 +1,218 @@
 # HTML 简介	
 #### 	什么是HTML
 			HTML (超文本标记语言 )  不是一门编程语言，而是一种用于定义网页内容的含义和结构 的标记语言 ，全称 超文本标记语言。由一系列元素（element）组成。
 			HTML 通过标记（markup） 来标明文本，图片和其他内容 ，除 HTML以外的其他技术则通常用来描述一个网页的表现与展示效果（通过css） 或功能行为 （js）
 #### html 基本结构
 	一个html 的基本 结构如下：
 > <!-- 在此处写注释内容 -->  用于在html文件中插入 注释
 ```
 <!DOCTYPE html>               <!-- 文档声明 -->
 <html>   					  <!-- <html></html>  定义文档整体 -->
 <head>				 		  <!-- <head></head>  对页面进行设置，定义标题，外链css,js文件等 -->
    <meta charset="UTF-8">    <!-- 定义网页的编码格式 -->
    <title>Document</title>   <!-- 定义页面标题 -->
 </head>
 <body>						  <!-- 编写网页上显示的内容 -->
 </body>
 </html>
 ```
 ### HTML 标签（元素）
 分类方式：
 - 有无闭合标签： 
  - 单标签    没有闭合标签  单标签内以 /结尾  如：<img />
  - 双标签    由开始标签+内容+结束标签 构成  如 ：<p>hello world</p>  
 - 块级元素
  - 定义：块级元素占据其父元素（容器）的整个空间  ，通常浏览器会在块级元素前后另起一个新行，即会导致换行
  - 示例： 
    - 大区块元素  div
    - 段落元素  p
    - 表格元素 table
    - 列表元素 ul , ol, li
    - 滚动元素 marquee
    - 水平线元素  hr
    - 标题元素  hn  (h1!~h6)
 - 内联元素
  - 定义：通常出现在块级元素中，包裹文档内容的一小部分，不会导致换行
  - 示例
    - 超链接  a
    - 文本区域  span
    - 表格标签   label
    - 斜体   i
    - 加粗  b, em, strong
    - 下划线  u
    - 多行文本输入框   textarea
 #### 常用标签详解
 -  段落标签
  ```
  <p>我是段落标签</p>
  ```
 - 列表元素
  - 有序列表 （ol-li）
    - 属性：
      - reversed  布尔值 值为true/false 指定编号是否为从高到低反向排列
      - start  一个整数值属性 值应该是数字  指定列表的起始值 
      - type 设置编号的类型  可选值如下：
        - 1 数字编号 （默认）
        - a  小写英文字母编号
        - A  大写英文字母编号
        - i 小写罗马数字编号
        - I 大写罗马数字编号
      > start 和type 在html4中被废弃 但是在html5 中被重新引入
    ```
    <ol>
      	<li>列表中第一列的内容</li>
      	...   更多列
    </ol>
    ```
    效果如下：
    ![image-20201217105145904](html.assets/image-20201217105145904-1608173514959.png)
  -  无序列表 （ul -li）
    - 常用属性
      -  type
        - circle  空心圆
        - disk    实心圆
        - square   方块
    - ```
      <ul>
      	<li> 列表中第一项的内容</li>
      </ul>
      ```
      ![image-20201217113857619](html.assets/image-20201217113857619.png)
 - hr  水平线
 - hn 标题元素
 - 空元素   没有内容的html 元素叫空元素
 - h1~h6标题
 - a 超链接
  - 属性 href 指定跳转到的网址
  - 具有默认的样式
  - 属性：
    - href 指定跳转到的网址
    - download  属性值为文件名
    - target 指定在哪里打开链接
      - _self 当前页面加载
      - _blank 新页面打开
      - title  鼠标悬停时的提示信息
  - 相对路径和绝对路径
    > **相对路径**-以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对。
    >
    > **绝对路径**-以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的。
    > 　　
    > 　　其实绝对路径与相对路径的**不同处**，只在于描述目录路径时，所采用的参考点不同。由于对网站上所有文件而言，根目录这个参考点对所有文件都是一样的，因此，运用以根目录为参考点的路径描述方式才会被称之为绝对路径。
    > 　　
    > 　　以下为建立路径所使用的几个特殊符号，及其所代表的意义。
    > 　　“.”–代表目前所在的目录。
    > 　　“..”–代表上一层目录。
    > 　　“/”–代表根目录。
 - 多媒体元素
  - 图片（img 标签）
    - 属性
      - src 显示图像的URL 
      - alt 规定图像的替代文本  即图片加载失败的提示文本
  - 视频（video 标签）
    - 属性
      - src  播放视频的URL
      - autoplay  值为autoplay  视频在就绪后马上播放
      - controls   值为controls  向用户显示控件（如播放按钮）
      -   loop  值为loop 循环播放
  - 音频（audio） 
    - 属性  和video标签属性类似
      - src  播放音频的URL
      - autoplay  值为autoplay  视频在就绪后马上播放
      - controls   值为controls  向用户显示控件（如播放按钮）
      -   loop  值为loop 循环播放
 #### 元素嵌套
 - 嵌套规则：
  - 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素
  - 块级元素不能放在<p>里面
  - 有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：
    　　h1、h2、h3、h4、h5、h6、p、dt
  -  li 内可以包含 div 标签  li 和 div 标 签都是装载内容的容器，地位平等，没有级别之分
  - 块级元素与块级元素并列、内嵌元素与内嵌元素并列
    - ```
      <div>
      	<h2></h2>
      	<p></p>
      </div> —— 对   块级元素嵌套内联元素和块级元素
      <div>
      	<a href=”#”></a>
      	<span></span>
      </div> —— 对   块级元素嵌套内联元素
      <div>
      	<h2></h2>
      	<span></span>
      </div> —— 错  h2 是块级元素  span 是内联元素  块级元素不能喝内联元素并列
      ```
 #### HTML 特殊符号
 HTML 常用的特殊字符：
 - &nbsp  空格
 - &copy  版权   ©
 - &reg  已注册   ®
--- a/html/表单.assets/image-20201217171232851.png
+++ b/html/表单.assets/image-20201217171232851.png
--- a/html/表单.md
+++ b/html/表单.md
@@ -0,0 +1,108 @@
 # 表单（form）
 ### form 简介
 form元素表示文档中的一个区域，此区域包含交互控件，用于向web 服务器提交信息
 ### form 常用属性
 - action 处理表单提交的url
  > action 这个属性可以被<button>,<input type="submit">,或者<input type="image">元素上的formaction 属性覆盖
 - method
  - 属性值：
    - get
    - post
 - target 
  - 属性值：
    - _blank  在新页面中打开
    - _self 在同一页面中打开
 ### form 常用控件
 - 	input 
  - 属性 
    - type
      - text  单行的文本区域，输入中的换行会被自动清除  （默认值）
      - password 密码框
      - tel 用于输入电话号码的控件，拥有动态键盘的设备（如手机）上会显示电话数字键盘
      - button  没有默认行为的按钮 
        > type =button 时，按钮中的文字是 value 属性的值，默认为空
      - radio 单选框
        > type=radio 时，显示的效果为单选框 属性有： name，value
        >
        > 属于一组的选项的name的值必须要统一 才能实现单选的效果
        >
        > 为了保证给后台的值是不同的，要定义不同的value  value 属性的值指代的是选择后取出的值
      - checkbox  复选框 
        > type=checkbox 时，显示的效果为多选框，属性为name, value
        >
        > 相同name的选项为同一组复选,checked="checked" 表示选中某复选项
        >
        > value也需要定义不同的值
      - hidden 隐藏
      - file  文件上传
        > 包含文件上传功能的表单 需要在form 表单的form 标签中添加 enctype="multipart/form-data" 
 - select 下拉框
  - 具体用法：
    ```
    <select name="pets" id="pet-select">
        <option value="">选项的值</option> <!-- value 的值是选中后传到服务器的值 -->
    </select>
    ```
    效果如下：
    ![image-20201217171232851](表单.assets/image-20201217171232851.png)
  - 常用属性 （针对select 标签)
    - multiple   能不能同时选中多个
    - size          一次显示多少个选项
    - selected="selected"  默认选中 针对  option
 - label   
  - 表示用户界面中某个元素的说明
  - 可以放在任何input 控件元素附近
  - label 是行内样式
 - textarea  多行文本框
  - 属性：
    - rows 定义文本框输入行数  即显示的高度
    - cols 定义文本框输入列数  即显示宽度
 ### form控件的公用属性：
 - 	placeholder 提供可描述输入字段预期值的提示信息
 -     disabled 禁用
 -     autofocus 自动聚焦
--- a/html/表格.assets/image-20201217144534429.png
+++ b/html/表格.assets/image-20201217144534429.png
--- a/html/表格.assets/image-20201217150855004.png
+++ b/html/表格.assets/image-20201217150855004.png
--- a/html/表格.md
+++ b/html/表格.md
@@ -0,0 +1,55 @@
 # 表格（table）
 ### 表格简介
 html的table元素表示表格数据  ——即通过二维数据表表示的信息
 ### 简单的表格
 ```
 <table>									<!-- table 声明是一个表格 -->
  <tr>									<!-- tr 声明一行 -->
    <td>第一行第一列格中的内容</td>		 <!--td 声明一列 -->
  </tr>
 </table>
 ```
 效果如下：
 ![image-20201217144534429](表格.assets/image-20201217144534429.png)
 ### 表格（table） 的相关标签
 | table   | 声明是个表格       |
 | ------- | ------------------ |
 | tr      | 声明一行           |
 | td      | 声明一列           |
 | caption | 声明表格标题       |
 | th      | 声明表格表头单元格 |
 | thead   | 表格头部           |
 | tbody   | 表格主体           |
 | tfoot   | 表格结尾           |
 > thead, tbody, tfoot 没有实际效果  只是响应 html5的语义化标签
 ### 表格 合并单元格
 table 通过colspan 属性实现横向合并
 		  通过rowspan 属性实现纵向合并
 > colspan和rowspan 的属性值都是数字
 >
 > 如： colspan="3"
 >
 > 		rowspan="4"
 效果如下：
 ![image-20201217150855004](表格.assets/image-20201217150855004.png)
--- a/htmlpress/demo/demo1.html
+++ b/htmlpress/demo/demo1.html
--- a/htmlpress/html基础.assets/image-20201230114235600.png
+++ b/htmlpress/html基础.assets/image-20201230114235600.png
--- a/htmlpress/html基础.assets/image-20201230114458198.png
+++ b/htmlpress/html基础.assets/image-20201230114458198.png
--- a/htmlpress/html基础.md
+++ b/htmlpress/html基础.md
@@ -0,0 +1,71 @@
 # HTML
 ## html 的基本概念
 html（HyperText Markup Language  --超文本标记语言），不是一个编程语言，而是一个用于定义一个网页的页面结构的标记语言。网页的内容不局限于文字，可以是 一个段落，一个列表，一张图片，一个表格...   HTML 由一系列的元素组成。
 > 注： html 定义网页 的页nchuang面结构， css定义页面的展现形式，javascript 定义页面的功能行为。
 ## 开始我们的HTML 之旅
 开始之前  需要新建一个 后缀名为.html 的文件，我们后面所说的所有操作，都是在html 文件中进行的 
 可以使用的编辑器有很多： 记事本，editplus, notepad++, **vscode** ....这里推荐vscode 
 ### html 基本结构
 ```
 <!DOCTYPE html>
 <html>
 <head>
    <title>Document</title>
 </head>
 <body>
 </body>
 </html>
 ```
 > 在解读上面的代码之前，我们先来看这些由<(左尖括号), 内容 , >(右尖括号) 组成的内容，这些内容叫做标签（tag）, 在html中用<> 把他们包裹起来是为了与其他纯文本内容进行区分
 >  <!DOCTYPE html> 是Document Type Declaration 的简称，用来声明文档，也就是告诉浏览器当前使用的是哪种HTML
 > <html></html> 表示页面编写的都是HTML代码，必须成对出现，除了文档生命之外的所有代码都必须写在<html></html>中间
 ><head></head> 表示页面的头部，页面的标题（title标签），meta元信息定义，文档样式表和脚本等信息  一般写在head 中间
 > 
 ><body></body> 表示页面的身体  页面内容需要写在 body 标签内 --
 ### 写第一个网页   --hello world
 ```
 <!DOCTYPE html>
 <html>
 <head>
    <title>第一个页面</title>
 </head>
 <body>
 	hello world
 </body>
 </html>
 ```
 效果如下：
 <!DOCTYPE html>
 <html>
 <head>
    <title>第一个页面</title>
 </head>
 <body>
 	hello world
 </body>
 </html>
 ### 元素
 ```
 <p>hello world</p>
 ```
 ![image-20201230114458198](html基础.assets/image-20201230114458198.png)
--- a/javascript/10对象.md
+++ b/javascript/10对象.md
@@ -0,0 +1,23 @@
 # 对象
 ## 创建
 - new Object()
 - {}
 ## 使用
 ```javascript
 var obj = new Object()
 // 创建属性
 obj.name = "name"
 // 动态操作属性
 var name = 'age'
 obj[age] = 18;
 ```
--- a/javascript/11.数组.md
+++ b/javascript/11.数组.md
@@ -0,0 +1,48 @@
 # 数组
 ## 创建
 - new Array()
 - []
 ## 使用
 ```javascript
 new Array(20) // 数组长度
 new Array('a','b','c') // 初始定义数组
 // 可以省略 new
 Array()
 // 字面量模式
 []
 [1,2,3]
 ```
 ## 索引
 ```javascript
 // 定义
 var arr = [0,1,1,2,3]
 // 使用第一项
 arr[0]
 // 索引是从0开始的
 ```
 ## 数组长度
 ```javascript
 // length
 var arr = [0,1,2,3]
 arr.length // 4
 // 重新定义length
 arr.length = 2 // [0,1]
 ```
 ## 数组方法 常用
 - join
 - push
 - unshift
 - pop
 - shift
 - splice
 - ....
--- a/javascript/12.dom.assets/1316408-20180226171835400-1011513544.png
+++ b/javascript/12.dom.assets/1316408-20180226171835400-1011513544.png
--- a/javascript/12.dom基础.md
+++ b/javascript/12.dom基础.md
@@ -0,0 +1,142 @@
 # DOM
 ## 节点层次
 ![JAVASCRIPT高级程序设计_9_DOM_节点层次- Jonathan_C - 博客园](12.dom.assets/1316408-20180226171835400-1011513544.png)
 ## 节点类型
 ## Document
 > nodeType 9
 >
 > nodeName '#document'
 >
 > nodeValue null
 >
 > parentNode null
 >
 > ownerDocument null
 ```javascript
 // 获取body
 var body = document.body
 // 标题
 // 获取
 var name = document.title;
 // 修改
 document.title = "新名字"
 // 获取url
 document.URL
 // 获取域名
 document.domain
 // 获取来源
 document.referrer
 ```
 ### 选择元素
 - id
 - class
 - name
 - tagname
 ### document.getElementById()
 ### document.getElementsByClassName()
 ### document.getElementsByTagName()
 ### document.getElementsByName()
 ## 文档写入 了解一下
 - write
 - writeln
 - open
 - close
 ```javascript
 write 在加载中不会覆盖页面 但是在页面加载完之后调用就会覆盖页面
 writeln 会在后面多输出一个换行符
 open 打开文档写入 如果没有调用 在write 的时候会自动执行
 close 写入完毕 执行之后再次写入会清除页面
 ```
 ## Element
 > nodetype 1
 >
 > nodeName 标签名
 >
 > nodeValue null
 >
 > parentNode Document / Element
 ### 相对于文档增加了几个属性
 - id
 - title
 - lang
 - dir
 - className
 ### 如何操作其他属性
 获取属性
 > .getAttribute()
 设置属性
 > .setAttribute() 会自动转化为小写
 ### 创建元素
 > document.createElement("")
 ### 添加元素到指定文档
 ```javascript
 appendChid()
 insertBefore()
 replaceChild()
 ```
 ### 获取元素后代
 > childNodes
 ## Text
 > nodetype 3
 >
 > nodeName #text
 >
 > nodeValue 内容
 >
 > parentNode Element
 >
 > 没有字节点
 >  可以使用 nodeValue 或者 data 访问 修改
 - appendData()
 - deleteData()
 - replaceData()
 - spitText()
 - substringData()
 #### 合并文本节点 (规范化)
 normalize()
 #### 拆分文本节点
 splitText()
--- a/javascript/13.dom编程.md
+++ b/javascript/13.dom编程.md
@@ -0,0 +1,44 @@
 # dom编程
 ## 动态脚本
 ```javascript
 // 创建script节点
 var script = document.createElement("script")
 // 设置src属性
 script.src = "foo.js"
 // 添加到body最后面
 document.body.appendChild(script)
 ```
 ```javascript
 var script = document.createElement("script")
 script.appendChild(document.createTextNode("function hi(){alert('hi')};hi()"))
 document.body.appendChild(script)
 ```
 >.text
 ## 动态样式
 ```javascript
 var style = document.createElement("style")
 style.type = "text/css"
 style.appendChild(document.createTextNode("body{background-color: red}"))
 var head = document.getElementsByTagName("head")[0]
 head.appendChild(style)
 ```
 > styleSheet.cssText
 ## 操作表格
 ```javascript
 var table = document.createElement("table")
 table.border = 1
 table.width="100%"
 .....
 // 自己操作
 ```
--- a/javascript/14.元素遍历.md
+++ b/javascript/14.元素遍历.md
@@ -0,0 +1,21 @@
 # 元素遍历
 ## 子元素数量
 > childElementCount
 ## 指向第一个Elemnet类型的子元素
 > firstElementChild
 ## 指向最后一个element类型的子元素
 > lastElementChild
 ## 指向前一个element类型的同胞元素 (同级)
 > previousElementSibling
 ## 指向后一个Element类型的 同胞元素
 > nextElementSibling
--- a/javascript/15.class操作.md
+++ b/javascript/15.class操作.md
@@ -0,0 +1,15 @@
 # css操作
 ## className
 获取标签的class 也可以用于修改
 ## classList 
 html5 新增
 - add 添加
 - contains 判断是否存在
 - remove 删除
 - toggle 存在就删除 不存在就添加
--- a/javascript/16插入标记.md
+++ b/javascript/16插入标记.md
@@ -0,0 +1,20 @@
 # 插入标记
 ## innerHTMl
 返回元素的html字符串 也可以修改html内容 会自动解析成dom元素 并且替换之前的内容
 ## outerHTML
 跟innerHTML差不多 但是会包含选择的标签
 ## insertAdjacentHTML
 - berforebegin  当前元素前面 同胞节点
 - afterbegin 当前元素内 开头
 - beforeend 当前元素内 末尾
 - afterend 当前元素后免 下一个同胞节点
 ## insertAdjacentText()
 文本节点 与上面一样
--- a/javascript/17style操作.assets/1007959-20170525224706872-1712987533.png
+++ b/javascript/17style操作.assets/1007959-20170525224706872-1712987533.png
--- a/javascript/17style操作.assets/1067628-20170420000550759-576494200.jpg
+++ b/javascript/17style操作.assets/1067628-20170420000550759-576494200.jpg
--- a/javascript/17style操作.assets/2020060423401084.png
+++ b/javascript/17style操作.assets/2020060423401084.png
--- a/javascript/17style操作.assets/69684321-3e819b00-10f3-11ea-8b1b-6c550fb8a78c.png
+++ b/javascript/17style操作.assets/69684321-3e819b00-10f3-11ea-8b1b-6c550fb8a78c.png
--- a/javascript/17style操作.md
+++ b/javascript/17style操作.md
@@ -0,0 +1,43 @@
 # style
 大多命名都是能转换的 只有float 是cssFloat
 el.style.css = value
 ## 扩展
 - cssText style css代码
 - length css数量
 - getPropertyCSSValue 判断是否使用important
 - getPropertyValue 返回查询属性的值
 - item 返回索引的css属性名
 - removeProperty 删除css属性
 - setProperty 设置css属性
 ## 偏移尺寸
 ![jacascript 偏移量offset、客户区client - 快乐锁- 博客园](17style操作.assets/1067628-20170420000550759-576494200.jpg)
 这些都是相对于父元素的
 ## 客户端尺寸
 ![JavaScript浏览器视口相关属性（图解） | 码农家园](17style操作.assets/2020060423401084.png)
 元素内部空间
 ## 滚动尺寸
 ![js第225天解释下offsetWidth、clientWidth、scrollWidth这三者的区别是什么？ · Issue #1572 ·  haizlin/fe-interview · GitHub](17style操作.assets/69684321-3e819b00-10f3-11ea-8b1b-6c550fb8a78c.png)
 ## 确定元素尺寸
 getBoundingClientRect()
 - letf
 - right
 - top
 - bottom
 - height
 - width
--- a/javascript/18事件.md
+++ b/javascript/18事件.md
@@ -0,0 +1,21 @@
 # 事件
 ## 事件处理
 ### html 
 - onclick
 > event
 ### js
 - addEventListener("")
 - revomeEventListenet()
 > 注意匿名函数
 ## 事件类型
 .....
--- a/javascript/19事件流.assets/v2-2bd515bb574e14cb14f19eff66dd5673_720w.jpg
+++ b/javascript/19事件流.assets/v2-2bd515bb574e14cb14f19eff66dd5673_720w.jpg
--- a/javascript/19事件流.md
+++ b/javascript/19事件流.md
@@ -0,0 +1,9 @@
 #  事件冒泡与捕获
 ![理解DOM事件与事件委托- 知乎](19事件流.assets/v2-2bd515bb574e14cb14f19eff66dd5673_720w.jpg)
 事件冒泡会从内往外厨房事件
 事件捕获会从外向内触发(传播)
 使用监听事件 第三个参数 ture 就是事件捕获 
--- a/javascript/20事件委托.md
+++ b/javascript/20事件委托.md
@@ -0,0 +1,6 @@
 # 事件委托
 > 
 >
 > 依赖于事件冒泡来搞 只需要在最外面监听 id
--- a/http请求.md
+++ b/http请求.md
@@ -0,0 +1,20 @@
 # xhr
 var xhr = new XMLHttpRequest()
 xhr.open(method,"url,是否同步)
 xhr.open(body)
 ```javascript
 xhr.open("get","url",false)
 xhr.send(null)
 // xhr.status 状态码
 // xhr.responseText 后台返回内容
 ```
 JSON
--- a/javascript/22.定时器.md
+++ b/javascript/22.定时器.md
@@ -0,0 +1,9 @@
 # 定时器
 setTimeout
 setTnterval
 crearTimeout()
 crearInterval()
--- a/javascript/23BOM.md
+++ b/javascript/23BOM.md
@@ -0,0 +1,14 @@
 # BOM
 ## window对象
 - open
 - moveTo
 - moveBy
 ## location
 ## navigator
 ## history
--- a/javascript/24递归闭包this.md
+++ b/javascript/24递归闭包this.md
@@ -0,0 +1,24 @@
 # 一些较难的
 ## 递归
 自己调用自己
 ```javascript
 function name(num){
    var sum = sum + name(num--)
 }
 ```
 ## 闭包
 理解执行期上下文
 ## this指向
 指向调用的对象
--- a/javascript/25from.md
+++ b/javascript/25from.md
@@ -0,0 +1,22 @@
 # from
 提交表单
 submit()
 阻止提交
 preventDefault()
 重置表单
 reset()
 获取表单字段
 elements
--- a/javascript/26原型原型链.assets/c4625bd915e6929a3747af1ff9f79bdc45e.jpg
+++ b/javascript/26原型原型链.assets/c4625bd915e6929a3747af1ff9f79bdc45e.jpg
--- a/javascript/26原型原型链.md
+++ b/javascript/26原型原型链.md
@@ -0,0 +1,46 @@
 ## 原型原型链
 ## 创建对象
 工厂模式
 ```javascript
 function obj(name){
    var o = new Object()
    o.name = name
    return o
 }
 ```
 构造函数
 ```javascript
 function Obj(name){
    this.name = name
 }
 ```
 ### 区别
 - 没有显式的创建对象
 - 属性方法直接赋值给his
 - 没有return
 ## instanceof
 **`instanceof`** **运算符**用于检测构造函数的 `prototype` 属性是否出现在某个实例对象的原型链上。
 ## 原型
 每个函数都会有prototype属性 这个属性是一个对象  他上面定义的属性和方法会被对象实例共享
 原型对象会自动获得一个 prototype.constructor 属性 指向 构造函数
 对象会在浏览器上暴露__proto__ 属性 对象的原型 其他实现中 被隐藏
 ![JavaScript继承（一）——原型链- Bob2100 - OSCHINA](26原型 原型链.assets/c4625bd915e6929a3747af1ff9f79bdc45e.jpg)
 ## 继承 
 自己找找 理解原型连之后就会明白继承
--- a/javascript/4.变量.md
+++ b/javascript/4.变量.md
@@ -1,4 +1,4 @@
-# 变量
+# 3变量
 >  javascript的变量是不区分类型的
@@ -16,3 +16,84 @@
 ## 变量类型
 - undefined
 - boolean
 - string
 - number
 - object
 - function
 ## typeof
 ## undefined
 任何只声明没有赋值的变量都是undefined
 ## null
 空对象指针
 ## boolean
 只有 true 和 false 
 ## number
 - 整数 121212
 - 小数 1.12121
 - 八进制 012475
 - 十六进制 0x2474ab
 > 浮点数精度问题
 		### NAN	
 非常特殊的一个值 应该有值返回的时候但没有值返回 注意 ： nan ！= nan
 ### parseInt
 转化到数字
 > 注意8进制
 ## string
 - 用‘’ 或 “” 定义
 - 单引号开头必须单引号结尾 
 - 双引号开头必须双引号结尾
 ### 字符字面量 了解就行
 - \n
 - \t
 - \b
 - \r
 - \f
 - \\\
 - \\'
 - \\"
 - \\xnn
 - \\unnnn
 ### .length
 ### .toString()
 ## object
 ### 创建
 `new Object() 或者 {}`
 ## ES6新增
 - let 变量
 - const 常量
--- a/javascript/5.操作符.md
+++ b/javascript/5.操作符.md
@@ -0,0 +1,52 @@
 # 操作符
 ## 一元操作符
 > 只能操作一个变量的操作符叫一元操作符
 - ++
 - --
 - +
 - -
 ## 布尔操作符
 - ！
 - &&
 - ||
 ## 乘性操作符
 - *
 - /
 - %
 ## 加性操作符
 - +
 - -
 ## 关系操作符
 - \>
 - \<
 - \>=
 - \<=
 ## 相等操作符
 - ==
 - !=
 - ===
 ## 赋值操作符
 - +=
 - -=
 - *=
 - /=
 ## 逗号操作符
 - var num1 = 1, num2 = 2;
 - var num2 = (1,2,3,4)
--- a/javascript/6.语句.md
+++ b/javascript/6.语句.md
@@ -0,0 +1,30 @@
 # 语句 全部实际演示一下就ok 
 ## if
 ## do-while
 ## while
 ## for
 ## for in
 ## break continue
 ## switch
--- a/javascript/7.函数.md
+++ b/javascript/7.函数.md
@@ -0,0 +1,47 @@
 # 函数
 ## 定义函数
 ```javascript
 function name(arg){
 	....
 }
 ```
 ## 参数
 使用预先定义名字 
 完成数组之后继续向下
 		### arguments
 ```javascript
 function name(){
    console.log(arguments)
 }
 name(1,2,3,4)
 ```
 ## 默认参数
 ```javascript
 function name(age){
    // age == undefined
 }
 name()
 ```
 ```javascript
 function name(age = 18){
    // ...
    return age
 }
 name() // 18
 name(10) // 10
 ```
--- a/javascript/8.基础类型与引用类型.md
+++ b/javascript/8.基础类型与引用类型.md
@@ -0,0 +1,18 @@
 # 基础类型与引用类型
 ## 基础类型
 - string
 - number
 - boolean
 - undefined
 - null
 ## 引用类型
 - object
 ## 传递参数
 > 基础类型会复制 引用类型会传递引用
--- a/javascript/9.作用域.md
+++ b/javascript/9.作用域.md
@@ -0,0 +1,34 @@
 # 作用域
 ```javascript
 var color = "blue"; 
 function changeColor(){ 
  if (color === "blue"){ 
  color = "red"; 
  } else { 
  color = "blue"; 
  } 
 } 
 changeColor(); 
 alert("Color is now " + color);
 ```
 ## 特殊情况
 - if
 - for
 - ...
 > 垃圾回收 gc
 ## 执行上下文
 > 内侧函数可以调用父级作用域的变量
 ## 垃圾清除
 - 标记清除
 - 引用计数
--- a/javascriptpress/1.javascript基础.assets/Peek
+++ b/javascriptpress/1.javascript基础.assets/Peek
--- a/javascriptpress/1.javascript基础.assets/image-20201229113118362.png
+++ b/javascriptpress/1.javascript基础.assets/image-20201229113118362.png
--- a/javascriptpress/1.javascript基础.assets/image-20201229113512817.png
+++ b/javascriptpress/1.javascript基础.assets/image-20201229113512817.png
--- a/javascriptpress/1.javascript基础.assets/image-20201229113911577.png
+++ b/javascriptpress/1.javascript基础.assets/image-20201229113911577.png
--- a/javascriptpress/1.javascript基础.md
+++ b/javascriptpress/1.javascript基础.md
@@ -0,0 +1,443 @@
 [[toc]]
 # javascript 基础
 ## 简介
 javascript 主要是由
 - ECMAScript
 - DOM
 - BOM
 > 其中 dom 与 bom 由 浏览器提供 
 > dom指的是html页面上的标签
 > bom 是浏览器提供的接口
 ## ECMAScript
 ECMAScript 是一种语言规范 javascript就是基于这个规范来编写的。
 使用语言的时候必须遵循这个规范来进行开发 
 他包括
 - 语法
 - 类型
 - 语句
 - 关键字
 - 保留字
 - 操作符
 - 对象
 ## DOM
 文档对象模型 是由浏览器提供的一个接口 能在javascript中可以操作页面
 ## BOM
 浏览器对象模型 是浏览器提供的一些对于浏览器与用户界面的一些接口 比如可以操作浏览器高度 宽度 与位置等等
 ## 在页面中使用javascript
 demo1
 ```html
 <html>
 <head>
    <title>javascript演示</title>
    <script>
        alert("hell world");
    </script>
 </head>
 <body>
    打开页面的时候会出现一个弹框 内容为hello world
 </body>
 </html>
 ```
 > 实际运行
 ![image-20201229113118362](1.javascript基础.assets/image-20201229113118362.png)
 在html中使用javascript是写在`<script></script>`标签中，中间写javascript代码
 然后里面是有一个alert("hello world") 这是一个函数 名字叫alert 运行的时候接受一个参数 弹出的信息就是这个参数的文字 比如改成你好世界 
 demo2
 ```html
 <html>
    <head>
        <title>javascript演示</title>
        <script>
            alert("你好世界");
        </script>
    </head>
    <body>
        打开页面的时候会出现一个弹框 内容为 你好世界
    </body>
 </html>
 ```
 > 运行结果
 ![image-20201229113512817](1.javascript基础.assets/image-20201229113512817.png)
 ## 什么是函数
 上面用到了一个函数 但是并没有函数定义 为什么能使用？
 因为浏览器会提供一些预制函数 alert就是浏览器提供的 所以我们并不用定义函数就能使用
 ### 手动定义一个函数
 demo3
 ```html
 <html>
    <head>
        <title>javascript演示</title>
        <script>
            function hello(){
                alert("你好")
            }
            hello()
        </script>
    </head>
    <body>
        打开页面的时候会出现一个弹框 内容为 你好
    </body>
 </html>
 ```
 > 页面显示
 ![image-20201229113911577](1.javascript基础.assets/image-20201229113911577.png)
 定义函数使用
 ```javascript
 function 名字(){
    函数体内容
 }
 ```
 调用是使用 名字 + ()
 上面的例子中定义了一个 hello的函数 内容是alert("你好")
 运行就是使用hello() 执行这个函数
 demo4
 ```html
 <html>
    <head>
        <title>javascript演示</title>
        <script>
            function hello(){
                alert("你好")
            }
            hello()
            function bay(){
                alert("再见")
            }
            bay()
        </script>
    </head>
    <body>
        打开页面的时候会出现一个弹框 内容为 你好 然后会出现 再见
    </body>
 </html>
 ```
 > 结果
 ![image](1.javascript基础.assets/Peek 2020-12-29 11-45.gif)
 ## 变量
 alert的时候 括号中填了一句话 但是我们自己写的就没有 那如何实现呢？ 想要实现的话 需要先了解一下javascript的变量
 什么叫变量呢？ 就是可以改变的量 比如把灯的开与关比作 0 和 1 的话 开关的状态就是可以改变的 当打开的时候是1 关闭的时候是0 
 有变量就会有常量 常量就是不可以改变的
 如何创建变量
 ```javascript
 var name = "我的名字";
 var age;
 age = 18;
 ```
 创建变量是用var 关键字 创建规则是 `var 变量名 = 变量值` 如果不想赋值初始值的话 `var 变量名` 就是创建一个空的变量 之后用到的时候直接用变量名就可以 因为变量只需要声明一次 就是可以先声明站位 之后需要给赋值的时候再给值
 ```html
 <html>
    <head>
        <title>javascript演示</title>
        <script>
            var name = "你好";
            alert(name);
        </script>
    </head>
    <body>
    </body>
 </html>
 ```
 > 运行之后页面会弹出内容为 你好 的弹出框
 比如把你好改成hello world
 ```html
 <html>
    <head>
        <title>javascript演示</title>
        <script>
            var name;
            name =  "hello world";
            alert(name);
        </script>
    </head>
    <body>
    </body>
 </html>
 ```
 > 运行之后页面会弹出内容为 hello world 的弹出框
 ```javascript
 解释一下
 定义一个变量 名字叫 name 值是 "hello world"
 var name = "hello world";
 让浏览器弹出name 
 alert(name);
 为什么这个写name 弹出的是 hello world 而不是 name
 注意下 name 是没有加引号的 没有加引号的字符串会被认为是关键字  自定义的变量或函数 
 ```
 例如
 ```html
 <html>
    <head>
        <title>javascript演示</title>
        <script>
            var name = "hello world";
            alert("name");
        </script>
    </head>
    <body>
    </body>
 </html>
 ```
 > 这时候弹出的就是 name 因为加了双引号 被认定为字符串 而不是变量了
 为什么" 内容 " 就被认定为字符串呢？
 ### javascript中的变量类型
 #### 字符串 string 
 先看一下字符串 他是用 "" 包裹的内容 就是被认定为是字符串
 比如 "我的名字是xxx" 这一段就会认定为是字符串
 name 这不加引号就会被认定为不是字符串 是关键字或者自定义的变量或函数
 所有的字符串都是用""或''包裹的
 为什么又多了个’‘号呢 但是这两个的效果是一样的
 ```javascript
 var name = "name";
 var age = '18';
 这两个效果是一样的都是字符串 一个是 name  一个是 18
 ```
 ```html
 <html>
    <head>
        <title>javascript演示</title>
        <script>
            var name = "name";
            var age = '18';
            alert(name);
            alert(age);
        </script>
    </head>
    <body>
    </body>
 </html>
 ```
 ### 数字 number
 有字符串的时候就应该有数字 那么数字是如何定义的呢？
 ```javascript
 var age = 18; 这是一个数字18
 var sex = 1.2 这是一个小数 1.2 在程序里面叫做浮点数
 ```
 只要输入数字就可以 不用加引号 这个就是一个数字
 上面说只要不加引号的都会被认定为关键字或者是方法或变量 但是这个 18 并没有加为什么没被认定为是变量或者其他呢？
 ### 命名规范
 命名就是你给自己的方法或者变量起的名字 规范是 命名必须用 字母 $ _ 
 - 26个英文字母
 - $ 美元符号
 - _ 下划线
 这三种开头的才会被认定为变量 
 例如
 ```javascript
 var name;
 var $age;
 var _name;
 ```
 也可以组合 例如
 ```javascript
 var name$n_jhzshd
 ```
 只要是这三种符号组合的符合规范的情况都是可以的
 ```javascriot
 var na me;
 不符合 因为有空格
 var na|me
 不符合 因为有 |
 ```
 等等 只要不在三种之类的符号 都不是正确的命名
 ### 数字相加
 已经知道了 什么是 数字 什么是 字符串了
 数字就是正常的 小数 整数 或者其他进制的数字 其他进制一般用不到 只是写法有区别 这个就不说了
 字符串就是用引号包裹的一段文字 可以用双引号 也可以用单引号
 那么数字是如何相加呢？
 ```javascript
 var num1 = 10;
 var num2 = 15;
 var sum = num1 + num2;
 alert(sum);
 ```
 这段代码放到页面上执行 就会弹出 25
 或者可以
 ```javascript
 var sum = 10 + 15;
 alert(sum);
 ```
 或者直接
 ```javascript
 alert(10 + 15);
 ```
 ## 操作符
 ### 加法操作符
 可以将两个变量的值和两个数字等相加
 > 值有是什么？ 变量是我们定义的名字 值就是变量的内容 比如
 ```javascript
 var num = 10;
 变量是mum  值是 10
 var name = "helloworld"
 变量是name  值是 "helloworld"
 ```
 加法是将两个值相加 数字是返回数学运算之后的值
 比如
 ```javascript 
 1+1 是2 
 10 + 15 是35
 12 + 13 是25
 1.5+2.5 是4
 ```
 #### 赋值顺序
 上面让变量接受加法运算的值的时候 变量在前 然后 = 运算 因为在程序中 给变量赋值是将等于号 后面的值给前面的变量 而不是像我们写数学运算的时候 前面是公式 后面是结果
 ```javascript
 var num = 1+1; 正确
 1+1 = var num; 错误 因为这样操作会将 num 赋值给1+1 但是1+1并不是变量
 ```
 ### 减法操作
 有加法一定有减法 减法跟加法一样 
 ```javascript
 var num1 = 10;
 var num2 = 15;
 var sum = num1 - num2;
 alert(sum);
 ```
 这个弹出的是 -5 因为 10 - 15 就是-5
 ```javascript
 var num1 = 20;
 var num2 = 15;
 var sum = num1 - num2;
 alert(sum);
 ```
 这个就会弹出 5 
 剩余就是跟+ 一样的
 ### 乘法操作
 乘法操作跟加减是一样的
 ```javascript
 var num1 = 20;
 var num2 = 15;
 var sum = num1 * num2;
 alert(sum);
 ```
 这个就会弹出300
 ### 除法
 ```javascript
 var num1 = 30;
 var num2 = 15;
 var sum = num1 / num2;
 alert(sum);
 ```
 这个就会弹出2
 ```javascript
 var num1 = 15;
 var num2 = 6;
 var sum = num1 / num2;
 alert(sum);
 ```
 这个就会弹出 2.5
 ### 组合起来
 比如一个计算中 既有加法又有减法还有乘法除法是怎么样的呢？
 ```javascript
 var sum = 1 + 2 * 3 / 4;
 alert(sum);
 ```
 这个会输出什么呢？ 计算的时候会怎么计算呢 是先计算1 + 2 然后得3 再乘以3 得9 再除以4吗？
 并不会 因为计算中会有优先级 计算的时候也是先计算乘除法 再计算加减法
 ```javascript
 var sum = 1 + 2 * 3 / 4;
 alert(sum);
 ```
 会输出2.5
 但是计算顺序如何呢？ 这个计算中* 和/ 哪个先计算呢？
 这在编程语言中叫做运算符的优先级 哪个优先级高就先计算哪一个 如果相同的话就依照顺序从左到右的方式计算
 比如 1 + 2 * 3 / 4
 就会先计算 2 * 3 然后拿到结果 / 4 在  用1 相加
 - 2 * 3 = 6
 - 6 / 4 = 1.5
 - 1 + 1.5 = 2.5
 再例如
 ```javascript
 2 * 2 + 4 + 2 / 2
 ```
 这个计算顺序 
 - 2 * 2 = 4
 - 2 / 2 = 1 
 - 4 + 4 + 1 = 9 
 这就是操作符的优先级 哪个优先级高就会先计算哪个 如果相同就按从左到右的顺序操作
 `+ - * / 的优先级是  * / 高于 + -`
 `* 与 / 相同`
 `+ 与 - 相同`
 ## 总结 
 总共写了 
 - alert 让浏览器弹出一个对话框
 - var 定义变量
 - 变量赋值
 - 字符串
 - 数字
 - 数字 加法减法乘法除法
 - `+ - * /` 的运算符与优先级顺序
 ## 作业
 - 定义一个变量 赋值为 "这是我的弹出框" 然后让浏览器弹出这个内容
 - 定义两个变量 分别赋值 5 和 6 弹出相加结果
 - 定义两个数字变量 值随意 弹出 两个变量相乘结果
 - 写出 `10 + 5 / 5 * 6 - 10` 的运算顺序
 - 自己了解一下 javascript操作符优先级
--- a/javascriptpress/2.javascript基础.assets/image-20201231104704137.png
+++ b/javascriptpress/2.javascript基础.assets/image-20201231104704137.png
--- a/javascriptpress/2.javascript基础.assets/image-20201231104814391.png
+++ b/javascriptpress/2.javascript基础.assets/image-20201231104814391.png
--- a/javascriptpress/2.javascript基础.assets/image-20201231105243850.png
+++ b/javascriptpress/2.javascript基础.assets/image-20201231105243850.png
--- a/javascriptpress/2.javascript基础.assets/image-20201231105424140.png
+++ b/javascriptpress/2.javascript基础.assets/image-20201231105424140.png
--- a/javascriptpress/2.javascript基础.assets/image-20201231105746998.png
+++ b/javascriptpress/2.javascript基础.assets/image-20201231105746998.png
--- a/javascriptpress/2.javascript基础.md
+++ b/javascriptpress/2.javascript基础.md
@@ -0,0 +1,283 @@
 # javascript 基础
 ## 函数
 上节中提到了函数 但是没有仔细说 这节仔细讲一下函数
 ### 函数声明
 定义变量有关键字var 定义函数也有一个 但是在定义函数的时候不叫定义函数 而叫声明函数 意思是一样的 只是叫法不同
 ### 语句
 在说明函数之前 先看一下什么是语句
 语句就是一个对浏览器要做的事情 比如上节中的`var name = "name"` 这就是一个语句
 - 关键字 var 告诉浏览器 定义一个变量
 - 名字是 var后面跟着的 是name
 - 然后 = 赋值 将“name” 赋值给name这个变量
 这就是一条语句
 ```javascript
 var name = "啦啦啦";
 var age = 18;
 ```
 上面的例子有两条语句 语句后面要用;结束 但是在javascript中 解释器会自动判断语句的结束 但是在特殊时候可能并不太准确 所以最好可以添加分号
 ```javascript
 var name = "啦啦啦"
 var age = 18
 ```
 不加分号跟上面添加分号的效果相同
 在javasctipt中 所有告诉浏览器执行的都叫语句
 ```javascript
 var name; 定义一个变量 名字叫name
 name = "啦啦啦"; 将 啦啦啦 这个字符串 赋值给name
 "啦啦啦"; 创建一个内容是 啦啦啦 的字符串
 ```
 ### 创建函数
 说完语句然后在来看看 如何创建函数
 ```javascript
 function name(){
    var name = "啦啦啦";
    var age = 18;
    alert(name);
 }
 ```
 上面的例子中
 - function 声明函数的关键字 后面跟名字
 - name 函数的名字 命名规则跟变量是一样的
 - () 下面再说
 - {} 中间就是函数要执行的语句
 函数就是包含这些东西
 但是函数如何使用呢？
 ```html
 <html>
    <head>
        <title>javascript演示</title>
        <script>
            function hello(){
                var name = "啦啦啦";
                var age = 18;
                alert(name);
            }
        </script>
    </head>
    <body>
        <button onClick="hello()">点我运行hello这个函数</button>
    </body>
 </html>
 ```
 定义了一个hello的函数 内容是弹出name的值 html中有一个button用于调用这个函数 如何调用呢？
 在button中看到一个 onClick 属性 值是hello() 在html中 几乎所有元素都有onClick属性 这个属性的值是要运行的javascript的函数名字 + ()
 为什么要加()呢 因为在变量那边说了 如果只有名字的话是取值 函数也是一样的 声明函数之后 用函数名字的话 只会拿到函数的内容 想要执行这个函数的代码内容的话 需要在函数名字后面加上() 表示运行这个函数
 这是在html中使用函数 但是还有一个疑问 声明函数的时候函数的代码内容会不会运行呢？ 带案是不会 因为声明的时候只会把函数代码内容经过解释器处理赋值给hello这个变量里面
 声明的函数也是一个变量 只是关键字不一样 用的是function  因为function 声明的都是函数 所以在用的时候都会说是声明一个函数 而不是声明一个名字为 hello的变量 值是一个函数
 ## 函数传参
 在上面说了如何声明函数 和函数如何调用 那么来说一下函数如何传参
 什么是参数呢？ 在生活中 比如我们要做一些事情 有些事情需要一些参数 比如你要去 超市买东西 结算的时候 收银员需要告诉你多少钱 你才能给他多少钱 而且在给的时候还要考虑带没带够钱或者能不能支付的起
 下面就实现一个这个函数
 - 告诉函数现在有多少钱
 - 告诉函数需要付多少钱
 - 函数需要判断现在的钱够不够
 - 如果足够告诉我们购买后还剩多少钱
 ## 预备知识
 ### 数据类型
 在javascript中 有很多类型的数据 前面说了有 数字和字符串 (number string)还有其他的
 - string
 - number
 - boolean
 - function
 - undefined
 - object
 ### 检测数据类型
 如何检测 javascript中有一个typeof
 例如
 ```javascript
 var name = "啦啦啦";
 alert(typeof name);
 ```
 ![image-20201231104704137](2.javascript基础.assets/image-20201231104704137.png)
 ```javascript
 var age = 18;
 alert(typeof age);
 ```
 ![image-20201231104814391](2.javascript基础.assets/image-20201231104814391.png)
 #### boolean
 只有 true 和 false 两个值 一个是真 一个是 假 就是他是不是的意思
 比如 1 + 1 = 2 正确 就是true
 在比如 1+1 = 3 错误 所以是fasle
 但是在javascript中 判断两个是否相等是 == 就是两个等于号 一个等号的时候是赋值
 例如
 ```javascript
 var bool = true;
 alert(typeof bool);
 alert(typeof (1+1==2));
 ```
 这两个都会弹出
 ![image-20201231105243850](2.javascript基础.assets/image-20201231105243850.png)
 #### function 
 就是定义的函数
 ```javascript
 function hello(){
 }
 alert(typeof hello)
 ```
 ![image-20201231105424140](2.javascript基础.assets/image-20201231105424140.png)
 #### undefined
 所有创建没有赋值的变量或属性都是undefined undefined类型的值只有一个 就是undefined
 例如
 ```javascript
 var age;
 alert(typeof age);
 alert(typeof undefined);
 ```
 ![image-20201231105746998](2.javascript基础.assets/image-20201231105746998.png)
 #### array 数组
 虽然说是数组 但是内容不只能是数字 只是索引是数字 就跟高中的集合一样
 举个例子
 ```javascript
 var list = ["苹果","香蕉","橘子"];
 // 这是一个内容都是水果的数组
 如何获取第一个苹果呢？
 alert(list[0])
 // 获取剩余的两个
 alert(list[1])
 alert(list[2])
 // 数组的索引是从0 开始的 就是[0] 是里面的第一个 不是从1开始了
 ```
 #### 对象
 对象跟数组差不多 但是是用字母索引的
 ```javascript
 var dog = {
 	name: "dog",
 	age: 7,
 	duak: fucntion (){
 		alert("汪")
 	}
 }
 alert(dog.name)
 alert(dog.age)
 dog.duak()
 ```
 对象使用属性内容是直接 对象.属性就行  属性名必须遵循命名规范 值可以是任意类型
 上节中说了数字之间的加法 字符串也可以相加 但是字符串的相加是直接拼接起来 字符串与数字相加也会将字符串与数字拼接起来 然后返回一个字符串 (类型后面会讲)
 例如
 ```javascript
 var name = "我的名字是:" + "啦啦啦"
 var age = "我的年龄是:" + 18
 ```
 - name的值是 我的名字是:啦啦啦
 - age的值是 我的年龄是:18
 就是这么简单的拼接
 #### 条件语句
 if else
 这个是一个条件语句 就是判断条件是否成立 如果成立会做什么事情 如果不成立要做什么事情
 举个例子
 ```javascript
 var tiaojian = true;
 if(tiaojian){
 alert("成立")
 } else {
 alert("不成立")
 }
 ```
 如果没有else
 ```javascript
 var tiaojian = true;
 if(tiaojian){
 alert("成立")
 }
 ```
 如果有多个条件
 ```javascript
 var num = 10
 if(num > 10){
 alert("大于10")
 }else if(num < 10){
 alert("小于10")
 }else {
 alert("等于10")
 }
 ```
 如果没有条件成立
 ```javascript
 var num = 10;
 if(num > 10){
 	alert("大于10")
 } 
 alert("匹配结束回到这")
 ```
 #### 函数传参
 ```javascript
 function people(name,age){
 alert("我的名字:" + name + "我的年龄:" + age);
 }
 people("啦啦啦", 18)
 ```
 只需要在函数后面的括号定义几个名字 而且需要遵循命名规范 
 ### 实现上面的题目
 ```javascript
 var num = 100;
 var shop = 80;
 function buy(num,shop){
 	if(num - shop < 0 ){
 		alert("买不起")
 	}else{
 		var shengyu = num - buy
 		alert("可以购买，剩余" + shengyu)
 	}
 }
 buy(num,shop)
 ```
 ## 作业
 - 创建一个对象 用alert 弹出它的所有属性
 - 创建一个数组 用alert弹出他所有的元素
 - 创建一个function 传入两个参数 弹出这两个参数相乘的结果
 - 创建一个function 传入两个数 弹出最大的那个数
--- a/javascriptpress/3.javascript基础.md
+++ b/javascriptpress/3.javascript基础.md
@@ -0,0 +1,24 @@
 # 数据类型转换
 ## 显式类型转换
 什么叫显示类型转换？ 就是手动用代码转换的时候叫显示 先看一下如何转换
 ```javascript
 var num = 8;
 alert(typeof num);
 num = String(num);
 alert(typeof num);
 ```
 创建的时候是number 使用String 转换之后就成了字符串 这就是显示转换
 那么转化有哪几个呢？
 - Strung
 - Number
 - Boolean
 这三个 用法跟上面一样
 ### number
 转换number的时候注意点
 - 只有是数字开头的才会被转换
 - 多个小数点之后会是nan
 - 
--- a/javascriptpress/demo/demo1.html
+++ b/javascriptpress/demo/demo1.html
@@ -0,0 +1,11 @@
 <html>
 <head>
    <title>javascript演示</title>
    <script>
        alert("hell world");
    </script>
 </head>
 <body>
    打开页面的时候会出现一个弹框 内容为hello world
 </body>
 </html>
--- a/javascriptpress/demo/demo2.html
+++ b/javascriptpress/demo/demo2.html
@@ -0,0 +1,11 @@
 <html>
    <head>
        <title>javascript演示</title>
        <script>
            alert("你好世界");
        </script>
    </head>
    <body>
        打开页面的时候会出现一个弹框 内容为 你好世界
    </body>
 </html>
--- a/javascriptpress/demo/demo3.html
+++ b/javascriptpress/demo/demo3.html
@@ -0,0 +1,14 @@
 <html>
    <head>
        <title>javascript演示</title>
        <script>
            function hello(){
                alert("你好")
            }
            hello()
        </script>
    </head>
    <body>
        打开页面的时候会出现一个弹框 内容为 你好
    </body>
 </html>
--- a/javascriptpress/demo/demo4.html
+++ b/javascriptpress/demo/demo4.html
@@ -0,0 +1,18 @@
 <html>
    <head>
        <title>javascript演示</title>
        <script>
            function hello(){
                alert("你好")
            }
            hello()
            function bay(){
                alert("再见")
            }
            bay()
        </script>
    </head>
    <body>
        打开页面的时候会出现一个弹框 内容为 你好 然后会出现 再见
    </body>
 </html>
--- a/javascriptpress/demo/demo5.html
+++ b/javascriptpress/demo/demo5.html
@@ -0,0 +1,15 @@
 <html>
    <head>
        <title>javascript演示</title>
        <script>
            function hello(){
                var name = "啦啦啦";
                var age = 18;
                alert(name);
            }
        </script>
    </head>
    <body>
        <button onClick="hello()">点我运行hello这个函数</button>
    </body>
 </html>
--- a/jquery/1jquery选择器.md
+++ b/jquery/1jquery选择器.md
@@ -0,0 +1,13 @@
 ## 选择器
 $()
 id #
 class .
 标签 直接标签名
 .....
 自己看看吧 没啥难得
--- a/vue/class和style绑定.md
+++ b/vue/class和style绑定.md
@@ -0,0 +1,165 @@
 # class 和 style绑定
 ### 绑定HTML class
 - 对象语法
  - 给v-bind:class 传入一个对象 来动态切换class
     v-bind:class="{类名:判断条件}"
    ```
    <div v-bind:class="{ active: isActive }"></div>
    ```
    > 表示active这个class是否存在 取决于isActive 的值转化过后是否为true
  - 传入更多字段来切换多个class  
    ```
    <div
      v-bind:class="{ active: isActive, 'text-danger': hasError }"
    ></div>
    ```
    附带如下 data
    ```
    data: {
      isActive: true,
      hasError: false
    }
    ```
    元素渲染结果为：
    ```
    <div class="active"></div>
    ```
    > 如果data 中的hasError的值变成 true
    >
    > 元素的渲染结果为：
    >
    > ```
    > <div class="active text-danger"></div>
    > ```
  - v-bind:class 可以和元素上普通的class属性并存
    ```
    <div
      class="static"
      v-bind:class="{ active: isActive, 'text-danger': hasError }"
    ></div>
    ```
    附带如下data:
    ```
    data: {
      isActive: true,
      hasError: false
    }
    ```
    元素的渲染结果为：
    ```
    <div class="static active"></div>
    ```
 - 数组语法
  - 可以把一个数组传给 v-bind:class 
    v-bind:class="[第一个类名, 第二个类名]"
    ```
    <div v-bind:class="[activeClass, errorClass]"></div>
    ```
    ```
    data: {
      activeClass: 'active',
      errorClass: 'text-danger'
    }
    ```
    渲染结果为：
    ```
    <div class="active text-danger"></div>
    ```
  - 在数组中用对象语法
    ```
    <div v-bind:class="[{ active: isActive }, errorClass]"></div>
    ```
 ### 绑定内联样式
 - 对象语法
  - 用javascript 对象表达css属性（不推荐）
    v-bind:style="{css属性名:  data中定义的属性值}"
    示例：
    ```
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
    ```
    附data:
    ```
    data: {
      activeColor: 'red',
      fontSize: 30
    }
    ```
  - 直接绑定到一个样式对象上（推荐）
    v-bind:style="data中的数据"
    ```
    <div v-bind:style="styleObject"></div>
    ```
    附data：
    ```
    data: {
      styleObject: {
        color: 'red',
        fontSize: '13px'
      }
    }
    ```
  - 绑定多个style对象
    ```
    <div v-bind:style="[static,choose]"></div>
    ```
    ```
    data: {
      static: {
        fontSize: '13px'
        border:'1px solid red'
      },
      choose:{
      	color:'red'
      }
    }
    ```
--- a/vue/vuecli.assets/image-20201224144644069.png
+++ b/vue/vuecli.assets/image-20201224144644069.png
--- a/vue/vuecli简介.md
+++ b/vue/vuecli简介.md
@@ -0,0 +1,52 @@
 # vuecli
 ### 准备工作：
 - 安装node ,npm
  > 安装node 会自带安装npm
  - http://nodejs.cn/download/  从官网下载msi文件
  - 运行msi文件 安装node,npm  安装过程中选择add to path
  - 安装完成后 打开cmd 输入node --version 
    -  如果出现版本号 证明node 安装成功
    - 如果出现 vue不是内部指令......  需要去配置 环境变量 把node的安装目录配置到系统变量的path中
 - 安装vue/cli
  	在cmd中运行 npm install -g @vue/cli 
  	等待安装完成， 运行 vue --version 
  	如果出现版本号  证明vue/cli 安装成功
 ### vue/cli 使用
 **创建一个项目**
 - cmd 中输入： vue create + 项目名
 - 选择是否切换taobao镜像
 - 选择建的模板基于vue2/vue3  现阶段直e2回车
 - 等待进度条跑完，生成新的一个以项目名命名的文件夹 证明新建完成
 ### 目录结构：
 如下图所示：
 ![image-20201224144644069](vuecli.assets/image-20201224144644069.png)
 -  node_modules  存放项目所需要的依赖包
 - public  存放静态文件
  - public/index 是个模板文件，作用是生成项目的入口文件，
 - src  整个项目的主文件夹 我们的代码大部分都要在个文件夹里完成
  - assets 图片文件 一般不要这个文件夹 换成img
  - components 组件存放地
  - App.vue  入口文件
  - main.js整个项目的主js文件，全局变量，插件都在这里引入
 - package.json 整个项目用到的所有插件的json格式， 规定各个插件的名称，版本号
 - readme.md  对项目的介绍
--- a/vue/vue简介.assets/image-20201221153546347.png
+++ b/vue/vue简介.assets/image-20201221153546347.png
--- a/vue/vue简介.assets/image-20201221154507952.png
+++ b/vue/vue简介.assets/image-20201221154507952.png
--- a/vue/vue简介.md
+++ b/vue/vue简介.md
@@ -0,0 +1,103 @@
 # vue简介
 ### vue是什么
 Vue  是一套用于构建用户界面的**渐进式框架**。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层
 ### vue引入
 - 创建一个html文件
 - 通过cdn 引入v
  - ```
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    ```
  - ```
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    ```
  > 当按下f12， 查看console里显示如下内容  证明我们的vue引入成功啦
  ![image-20201221153546347](vue简介.assets/image-20201221153546347.png)
 - 下载vue 源码 然后从本地引入
 ### vue 创建基本实例：
 文本插值：{{data中的属性}}
 html:
 ```
 <div id="app">
  {{ message }}
 </div>
 ```
 js部分：
 ```
 var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
  //data属性就是用来绑定数据到HTML的
 })
 ```
 效果：
 ![image-20201221154507952](vue简介.assets/image-20201221154507952.png)
 > 注意：
 >
 > 	1. 一个vue应用汇挂载到一个dom 元素上，对于这个实例是id=app的div
 > 	2. 现在数据和dom 已经建立了关联，而且所有内容都是响应式的，这意味着我们如果在js中修改app.message的值，那么页面上显示的内容也会随之改变 查看过程中无需刷新
 > 	3. 现在开始我们不再直接和html直接交互了,交互操作放在新创建的Vue实例内部
 绑定元素的属性（attribute）  **v-bind**
 html:
 ```
 <div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
 </div>
 ```
 js：
 ```
 var app2 = new Vue(var app2 = new Vue({
  el: '#app-2',
  data: { 
    message: '这是悬停时的提示信息哦'
  t}
 })
 ```
 > v--bind  被称为指令。指令带有前缀‘v-’ 来表示他们是vue 提供的 特殊内容。他们会在渲染的dom上应用特殊的相应行为  即为渲染的dom添加一个属性
 >
 > v-bind:+属性名="属性值"
 >
 > v-bind 的缩写是  :
--- a/vue/事件.md
+++ b/vue/事件.md
@@ -0,0 +1,115 @@
 # vue 方法（事件处理）
 ### 事件监听
 可以用v-on指令监听DOM事件，并在触发时运行一些javascript  v-on 简写为@
 事件处理方法
 - 直接触发javascript代码(不推荐)
 示例：
 ```
 <div id="app" >
        <button v-on:click="alert('hello!!!')">测试</button>
 </div>
 ```
 - 在内联javascript 语句中调用方法（不推荐）
  ```
  <div id="example-3">
    <button v-on:click="say()">Say hi</button>
  </div>
  ```
  ```
  new Vue({
    el: '#example-3',
    methods: {
      say: function () {
        alert('hi')
      }
    }
  })
  ```
 - 事件处理方法（推荐）
  ```
   <div id="app" >
          <button v-on:click="say">测试</button>
   </div>
  ```
  ```
  new Vue({
    el: '#example-3',
    methods: {
      say: function () {
        alert('hi')
      }
    }
  })
  ```
  > methods中注册的是触发时执行的函数，也叫方法
 ### 事件修饰符
 - `.stop`
  > 等同于JavaScript中的event.stopPropagation()，防止事件冒泡
 - `.once`
  > 只会触发一次
 使用：
 ```
 <a v-on:click.stop="doThis"></a>
 ```
 可以同时使用多个修饰符
 ```
 <a v-on:click.stop.once="doThat"></a>
 ```
 ### 按键修饰符（自行拓展）
 监听键盘事件：
@keydown（键盘按下时触发），@keypress(键盘按住时触发)，@keyup(键盘弹起)
 ```
 获取按键的键码 e.keyCode
@keyup.delete    删除键
@keyup.enter 回车
@keyup.esc  ESC
@keyup.space 空格
@keyup.tab TAB
@keyup.left     左键
@keyup.right    右键
@keyup.up    上键
@keyup.down  下键
 ```
--- a/vue/循环渲染.assets/image-20201222100803116.png
+++ b/vue/循环渲染.assets/image-20201222100803116.png
--- a/vue/循环渲染.assets/image-20201222101315624.png
+++ b/vue/循环渲染.assets/image-20201222101315624.png
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
luyuan	de877bd04f	Merge branch 'master' of http://git.luyuan.tk/luyuan/webveuje	2020-12-31 10:22:27 +08:00
asd	f9cc8781cc	css	2021-01-05 09:18:22 +08:00
luyuan	46170ef23d	js	2021-01-04 14:13:00 +08:00
luyuan	97a4f337d6	2	2021-01-04 09:38:03 +08:00
luyuan	56dd06fae1	js	2020-12-31 10:22:15 +08:00
luyuan	2ac1c5b5b9	js	2020-12-31 09:56:58 +08:00
luyuan	b102698d90	第一节	2020-12-30 13:35:42 +08:00
luyuan	beacca0952	js	2020-12-29 18:18:08 +08:00
asd	7bc1ee59ee	vue 生命周期	2020-12-29 18:16:52 +08:00
luyuan	63638fff16	js	2020-12-28 09:56:22 +08:00
luyuan	7836f1f7de	Merge branch 'master' of http://git.luyuan.tk/luyuan/webveuje	2020-12-25 09:35:29 +08:00
luyuan	6231dbaeda	js	2020-12-25 09:35:21 +08:00
asd	ab28a5032b	vuecli	2020-12-24 17:39:52 +08:00
luyuan	74e6f8295e	Merge branch 'master' of http://git.luyuan.tk/luyuan/webveuje	2020-12-24 09:36:10 +08:00
luyuan	6fb32aa856	js	2020-12-24 09:35:58 +08:00
asd	704a4b02b2	zujian	2020-12-23 16:51:20 +08:00
asd	19ba3b009e	vue	2020-12-23 10:29:16 +08:00
luyuan	d25956be08	js	2020-12-23 09:17:22 +08:00
luyuan	54f0573948	Merge branch 'master' of http://git.luyuan.tk/luyuan/webveuje	2020-12-22 09:19:27 +08:00
luyuan	d39715f110	js	2020-12-22 09:19:13 +08:00
asd	c05d061e82	css 响应式	2020-12-21 15:00:06 +08:00
luyuan	0879393caf	js	2020-12-21 10:33:16 +08:00
luyuan	58632cc952	Merge branch 'master' of http://git.luyuan.tk/luyuan/webveuje	2020-12-21 09:26:31 +08:00
luyuan	cf0ffb3672	js	2020-12-21 09:26:16 +08:00
asd	1e78ce19f9	css	2020-12-18 17:07:56 +08:00
luyuan	04ea9eecd7	js	2020-12-18 10:55:06 +08:00
asd	d16db840ea	表单	2020-12-17 17:57:50 +08:00
asd	865bb0bcb5	html 简介	2020-12-17 14:30:15 +08:00