diff --git a/css/css简介.md b/css/css简介.md
new file mode 100644
index 0000000..f959955
--- /dev/null
+++ b/css/css简介.md
@@ -0,0 +1,106 @@
+# 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] 选择<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元素之后插入生成的内容 |
+
+
+
diff --git a/css/弹性盒子.assets/image-20201218164425451.png b/css/弹性盒子.assets/image-20201218164425451.png
new file mode 100644
index 0000000..9130967
Binary files /dev/null and b/css/弹性盒子.assets/image-20201218164425451.png differ
diff --git a/css/弹性盒子.assets/image-20201218165134275.png b/css/弹性盒子.assets/image-20201218165134275.png
new file mode 100644
index 0000000..8c31fbe
Binary files /dev/null and b/css/弹性盒子.assets/image-20201218165134275.png differ
diff --git a/css/弹性盒子.assets/image-20201218165414077.png b/css/弹性盒子.assets/image-20201218165414077.png
new file mode 100644
index 0000000..b7a0d9f
Binary files /dev/null and b/css/弹性盒子.assets/image-20201218165414077.png differ
diff --git a/css/弹性盒子.assets/image-20201218165546847.png b/css/弹性盒子.assets/image-20201218165546847.png
new file mode 100644
index 0000000..66e8784
Binary files /dev/null and b/css/弹性盒子.assets/image-20201218165546847.png differ
diff --git a/css/弹性盒子.assets/image-20201218165635626.png b/css/弹性盒子.assets/image-20201218165635626.png
new file mode 100644
index 0000000..de7f38b
Binary files /dev/null and b/css/弹性盒子.assets/image-20201218165635626.png differ
diff --git a/css/弹性盒子.assets/image-20201218165726666.png b/css/弹性盒子.assets/image-20201218165726666.png
new file mode 100644
index 0000000..1bc35d4
Binary files /dev/null and b/css/弹性盒子.assets/image-20201218165726666.png differ
diff --git a/css/弹性盒子.assets/image-20201218170008166.png b/css/弹性盒子.assets/image-20201218170008166.png
new file mode 100644
index 0000000..1158d5a
Binary files /dev/null and b/css/弹性盒子.assets/image-20201218170008166.png differ
diff --git a/css/弹性盒子.md b/css/弹性盒子.md
new file mode 100644
index 0000000..6c0717d
--- /dev/null
+++ b/css/弹性盒子.md
@@ -0,0 +1,142 @@
+#  弹性盒子（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
+- 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)
+
+
+
+
+
diff --git a/css/盒模型.assets/3EXWM8R]ILQ_Z_WU]KU%1SM-1608278714392.png b/css/盒模型.assets/3EXWM8R]ILQ_Z_WU]KU%1SM-1608278714392.png
new file mode 100644
index 0000000..071b7fa
Binary files /dev/null and b/css/盒模型.assets/3EXWM8R]ILQ_Z_WU]KU%1SM-1608278714392.png differ
diff --git a/css/盒模型.assets/image-20201218160440679.png b/css/盒模型.assets/image-20201218160440679.png
new file mode 100644
index 0000000..731b1df
Binary files /dev/null and b/css/盒模型.assets/image-20201218160440679.png differ
diff --git a/css/盒模型.md b/css/盒模型.md
new file mode 100644
index 0000000..7312e7f
--- /dev/null
+++ 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范围
+
+​	
\ No newline at end of file
diff --git a/html/html简介.md b/html/html简介.md
index e2e0cdd..ed89ac6 100644
--- a/html/html简介.md
+++ b/html/html简介.md
@@ -58,6 +58,7 @@
     - 表格标签   label
     - 斜体   i
     - 加粗  b, em, strong
+    - 下划线  u
     - 多行文本输入框   textarea
 
 
@@ -126,8 +127,51 @@
 - a 超链接
 
   - 属性 href 指定跳转到的网址
+
   - 具有默认的样式
 
+  - 属性：
+
+    - href 指定跳转到的网址
+    - download  属性值为文件名
+    - target 指定在哪里打开链接
+      - _self 当前页面加载
+      - _blank 新页面打开
+      - title  鼠标悬停时的提示信息
+
+  - 相对路径和绝对路径
+
+    > **相对路径**-以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对。
+    >
+    > **绝对路径**-以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的。
+    > 　　
+    > 　　其实绝对路径与相对路径的**不同处**，只在于描述目录路径时，所采用的参考点不同。由于对网站上所有文件而言，根目录这个参考点对所有文件都是一样的，因此，运用以根目录为参考点的路径描述方式才会被称之为绝对路径。
+    > 　　
+    > 　　以下为建立路径所使用的几个特殊符号，及其所代表的意义。
+    > 　　“.”–代表目前所在的目录。
+    > 　　“..”–代表上一层目录。
+    > 　　“/”–代表根目录。
+
+
+
+- 多媒体元素
+  - 图片（img 标签）
+    - 属性
+      - src 显示图像的URL 
+      - alt 规定图像的替代文本  即图片加载失败的提示文本
+  - 视频（video 标签）
+    - 属性
+      - src  播放视频的URL
+      - autoplay  值为autoplay  视频在就绪后马上播放
+      - controls   值为controls  向用户显示控件（如播放按钮）
+      -   loop  值为loop 循环播放
+  - 音频（audio）
+    - 属性
+      - src  播放音频的URL
+      - autoplay  值为autoplay  视频在就绪后马上播放
+      - controls   值为controls  向用户显示控件（如播放按钮）
+      -   loop  值为loop 循环播放
+
 #### 元素嵌套
 
 - 嵌套规则：
