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

css/css简介.md

@@ -79,14 +79,14 @@ p {
 ### css 选择器
 
 | 选择器名称               | 选择的内容                                       | 示例                                                    |
-| ------------------------ | ------------------------------------------------ | -------------------------------------------- |
+| ------------------------ | ------------------------------------------------ | ------------------------------------------------------- |
 | 标签选择器（元素选择器） | 所有是这个标签的HTML元素                         | p   选择整个文件中的所有p 标签                          |
 | id选择器                 | 具有特定id 的html元素                            | #my  选择标签内id为‘my’的元素                           |
 | 类选择器                 | 带有class=''特定类的元素                         | .nav   选择标签内class="nav"的元素                      |
-| 属性选择器               | 拥有特定属性的元素                               | img[src] 选择<img src="xxx"/> 而不是 <img /> |
+| 属性选择器               | 拥有特定属性的元素                               | 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元素，E和F之间用空格分隔 | div p                                                   |
 | E>F                      | 匹配所有E元素的子元素F                           | div > p                                                 |
 | E+F                      | 匹配所有紧跟E元素之后的同级元素F                 | div+p                                                   |
@@ -104,3 +104,8 @@ p {
 
 
 
+p :hover{
+
+​	color:red;	
+
+}

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属性完全一致。

css/定位.md

@@ -88,6 +88,8 @@ css
         position: static;
         top: 20px;
         left: 20px;
+        bottom:1px;
+        right:9px
         background: blue;
     }
 ```

css/弹性盒子.md

@@ -54,7 +54,7 @@ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型
 
 ### 常用属性
 
-- flex-direction
+- flex-direction:row;/column
 - flex-wrap
 - flex-flow
 - justify-content

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选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性**

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的上下宽度

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)

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  默认占满整个容器的高度

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。
+

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>

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>

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)
+