diff --git a/csspress/1.css基础.md b/csspress/1.css基础.md
index e946157..69fd612 100644
--- a/csspress/1.css基础.md
+++ b/csspress/1.css基础.md
@@ -154,4 +154,37 @@ body{
6. 通配符选择器
7. 浏览器自定义或继承
- **总结排序:!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性**
\ No newline at end of file
+ **总结排序:!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性**
+
+
+
+### css 常用属性
+
+width:数值 px (单位) 设置宽度
+
+height:数值 px(单位) 设置高度
+
+background: 英文颜色或者16进制颜色码(如\#ff0000)或者rgb颜色码(如rgb(255,0,0))或者图片( url('文件路径') ) 设置背景颜色
+
+color:英文颜色或者16进制颜色码(如\#ff0000)或者rgb颜色码(如rgb(255,0,0)) 设置字体颜色
+
+border: 1px solid red 1px 是边框宽度 solid 是线条类型为直线 red 为边框颜色
+
+border-radius:29px 边框圆角
+
+font-size:13px 字体大小
+
+font-weight:normal(正常默认) 或者 bold(加粗)
+
+line-height:20px 设置行高
+
+text-align:left( 左对齐) center (居中) right(右对齐) 文字对齐方式
+
+overflow :auto(滚动条)/ hidden (隐藏) 横向和纵向内容溢出的表现
+
+overflow-x:auto(滚动条)/ hidden (隐藏) 横向内容溢出的表现
+
+overflow-y:auto(滚动条)/ hidden (隐藏) 纵向内容溢出的表现
+
+
+
diff --git a/csspress/2.盒模型.assets/1072590-20161225165033198-1543996399.png b/csspress/2.盒模型.assets/1072590-20161225165033198-1543996399.png
new file mode 100644
index 0000000..c0e527e
Binary files /dev/null and b/csspress/2.盒模型.assets/1072590-20161225165033198-1543996399.png differ
diff --git a/csspress/2.盒模型.assets/image-20201218160440679.png b/csspress/2.盒模型.assets/image-20201218160440679.png
new file mode 100644
index 0000000..731b1df
Binary files /dev/null and b/csspress/2.盒模型.assets/image-20201218160440679.png differ
diff --git a/csspress/2.盒模型.assets/image-20210104085742577.png b/csspress/2.盒模型.assets/image-20210104085742577.png
new file mode 100644
index 0000000..e1ed5c2
Binary files /dev/null and b/csspress/2.盒模型.assets/image-20210104085742577.png differ
diff --git a/csspress/2.盒模型.assets/image-20210112113853593.png b/csspress/2.盒模型.assets/image-20210112113853593.png
new file mode 100644
index 0000000..9cb2ff9
Binary files /dev/null and b/csspress/2.盒模型.assets/image-20210112113853593.png differ
diff --git a/csspress/2.盒模型.assets/image-20210112114420660.png b/csspress/2.盒模型.assets/image-20210112114420660.png
new file mode 100644
index 0000000..52e5dd5
Binary files /dev/null and b/csspress/2.盒模型.assets/image-20210112114420660.png differ
diff --git a/csspress/2.盒模型.assets/image-20210118112058180.png b/csspress/2.盒模型.assets/image-20210118112058180.png
new file mode 100644
index 0000000..592a061
Binary files /dev/null and b/csspress/2.盒模型.assets/image-20210118112058180.png differ
diff --git a/csspress/2.盒模型.assets/image-20210118112453705.png b/csspress/2.盒模型.assets/image-20210118112453705.png
new file mode 100644
index 0000000..99919f0
Binary files /dev/null and b/csspress/2.盒模型.assets/image-20210118112453705.png differ
diff --git a/csspress/2.盒模型.md b/csspress/2.盒模型.md
index 9580221..77457d7 100644
--- a/csspress/2.盒模型.md
+++ b/csspress/2.盒模型.md
@@ -38,11 +38,11 @@ css 盒模型包括如下要素
- 边框(border)
- 外边距(margin)
-![image-20201218160440679](E:\web\测试lesson\kejian\css\盒模型.assets\image-20201218160440679.png)
+![image-20201218160440679](E:\web\lessons\课件\csspress\2.盒模型.assets\image-20201218160440679.png)
-![image-20210104085742577](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210104085742577.png)
+![image-20210104085742577](E:\web\lessons\课件\csspress\2.盒模型.assets\image-20210104085742577.png)
@@ -97,7 +97,7 @@ css 盒模型包括如下要素
(一)
-![image-20210112113853593](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210112113853593.png)
+![image-20210112113853593](E:\web\lessons\课件\csspress\2.盒模型.assets\image-20210112113853593.png)
@@ -151,7 +151,7 @@ div11的高度为0 的时候,div1的margin值由 div1,div11,div12的margin合
如此例中,div1的margin 值为30
-![image-20210112114420660](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210112114420660.png)
+![image-20210112114420660](E:\web\lessons\课件\csspress\2.盒模型.assets\image-20210112114420660.png)
@@ -206,5 +206,72 @@ div11的高度为0 的时候,div1的margin值由 div1,div11,div12的margin合
+解决措施:
+
+给外边距加上如下属性,可以解决外边距合并的问题
+
+ border-top: 1px solid white; 给父元素加上边框
+
+ overflow: hidden; 设置超出隐藏
+
+ padding-top:50px; 给父盒子加padding-top 可以实现同样的效果
+
+margin 复合属性
+
+上右下左
+
+例如:
+
+ margin 一个值得时候定义的是上下左右四个方向的边距
+ 两个值得时候定义的前一个值是上下的边距 后面的值是左右的边距
+ 三个值得时候第一个值是上边距 第二个值是左右边距 第三个值是下边距
+ 四个值得时候是上右下左的边距
+
+
+
+
+
+
+padding复合属性
+
+上右下左
+
+例如:
+
+ padding一个值得时候定义的是上下左右四个方向的边距
+ 两个值得时候定义的前一个值是上下的边距 后面的值是左右的边距
+ 三个值得时候第一个值是上边距 第二个值是左右边距 第三个值是下边距
+ 四个值得时候是上右下左的边距
+
+
+
+
+
+练习1:
+
+五环之歌 效果如下:
+![image-20210118112058180](E:\web\lessons\课件\csspress\2.盒模型.assets\image-20210118112058180.png)
+
+作业2:
+
+分类菜单 效果如下
+
+![image-20210118112453705](E:\web\lessons\课件\csspress\2.盒模型.assets\image-20210118112453705.png)
+
+作业三:
+
+效果如下:
+
+![img](E:\web\lessons\课件\csspress\2.盒模型.assets\1072590-20161225165033198-1543996399.png)
+
+
+
+
+
+注:
+
+左下角录制工具的水印不用做
+
+图片可以自定义
\ No newline at end of file
diff --git a/csspress/3.定位.assets/image-20210104095232481.png b/csspress/3.定位.assets/image-20210104095232481.png
new file mode 100644
index 0000000..5a6818b
Binary files /dev/null and b/csspress/3.定位.assets/image-20210104095232481.png differ
diff --git a/csspress/3.定位.assets/image-20210104101111002.png b/csspress/3.定位.assets/image-20210104101111002.png
new file mode 100644
index 0000000..85a1adb
Binary files /dev/null and b/csspress/3.定位.assets/image-20210104101111002.png differ
diff --git a/csspress/3.定位.assets/image-20210104102616301.png b/csspress/3.定位.assets/image-20210104102616301.png
new file mode 100644
index 0000000..2ae1315
Binary files /dev/null and b/csspress/3.定位.assets/image-20210104102616301.png differ
diff --git a/csspress/3.定位.assets/image-20210104104339420.png b/csspress/3.定位.assets/image-20210104104339420.png
new file mode 100644
index 0000000..160fcd8
Binary files /dev/null and b/csspress/3.定位.assets/image-20210104104339420.png differ
diff --git a/csspress/3.定位.assets/image-20210104113658613.png b/csspress/3.定位.assets/image-20210104113658613.png
new file mode 100644
index 0000000..c2d6a40
Binary files /dev/null and b/csspress/3.定位.assets/image-20210104113658613.png differ
diff --git a/csspress/3.定位.assets/image-20210104115013701.png b/csspress/3.定位.assets/image-20210104115013701.png
new file mode 100644
index 0000000..c150376
Binary files /dev/null and b/csspress/3.定位.assets/image-20210104115013701.png differ
diff --git a/csspress/3.定位.assets/image-20210104115040341.png b/csspress/3.定位.assets/image-20210104115040341.png
new file mode 100644
index 0000000..6bea583
Binary files /dev/null and b/csspress/3.定位.assets/image-20210104115040341.png differ
diff --git a/csspress/3.定位.assets/image-20210118113158799.png b/csspress/3.定位.assets/image-20210118113158799.png
new file mode 100644
index 0000000..700fb3d
Binary files /dev/null and b/csspress/3.定位.assets/image-20210118113158799.png differ
diff --git a/csspress/3.定位.assets/image-20210118113652011.png b/csspress/3.定位.assets/image-20210118113652011.png
new file mode 100644
index 0000000..58874fa
Binary files /dev/null and b/csspress/3.定位.assets/image-20210118113652011.png differ
diff --git a/csspress/3.定位.assets/image-20210118172837051.png b/csspress/3.定位.assets/image-20210118172837051.png
new file mode 100644
index 0000000..5cbd5e7
Binary files /dev/null and b/csspress/3.定位.assets/image-20210118172837051.png differ
diff --git a/csspress/3.定位.assets/image-20210118172910611.png b/csspress/3.定位.assets/image-20210118172910611.png
new file mode 100644
index 0000000..3d7f844
Binary files /dev/null and b/csspress/3.定位.assets/image-20210118172910611.png differ
diff --git a/csspress/3.定位.assets/image-20210118172934691.png b/csspress/3.定位.assets/image-20210118172934691.png
new file mode 100644
index 0000000..e8d7bd7
Binary files /dev/null and b/csspress/3.定位.assets/image-20210118172934691.png differ
diff --git a/csspress/3.定位.assets/image-20210118173020931.png b/csspress/3.定位.assets/image-20210118173020931.png
new file mode 100644
index 0000000..9734f3c
Binary files /dev/null and b/csspress/3.定位.assets/image-20210118173020931.png differ
diff --git a/csspress/3.定位.assets/image-20210118173115050.png b/csspress/3.定位.assets/image-20210118173115050.png
new file mode 100644
index 0000000..b9a7c98
Binary files /dev/null and b/csspress/3.定位.assets/image-20210118173115050.png differ
diff --git a/csspress/3.定位.md b/csspress/3.定位.md
index 78472e6..a780b13 100644
--- a/csspress/3.定位.md
+++ b/csspress/3.定位.md
@@ -1,5 +1,31 @@
# 定位(position)
+### 为什么要使用定位
+
+请问以下状况用标准流或者浮动可以实现吗?
+
+- 想让广告右下角的切换的那三个点图标 在广告框内自由移动位置,并且会压住下面的盒子 覆盖在最上面
+
+![image-20210118113158799](E:\web\lessons\课件\csspress\3.定位.assets\image-20210118113158799.png)
+
+
+
+- 不管滚动条滚动到什么位置 ,元素都始终固定在原来的位置不变
+
+ ![image-20210118113652011](E:\web\lessons\课件\csspress\3.定位.assets\image-20210118113652011.png)
+
+**结论** :
+
+1. 以上的两种情况 用普通的文档流和浮动都不能快速实现,此时要用定位来实现
+
+2. 浮动和定位的区别
+
+ 浮动可以让多个块级盒子一行内没有缝隙排列显示 经常用于
+
+
+
+
+
position 用来定义元素在网页上的位置,常用的有五种:
- static 正常的页面流,position属性的默认值
@@ -8,13 +34,19 @@ position 用来定义元素在网页上的位置,常用的有五种:
- fixed 固定定位
- sticky 粘性布局
+语法:
+
+position:定位方式
+
+方向:偏移值
+
### static
这时浏览器会按照源码的顺序决定元素的位置,这样称为“正常的页面流”。块级元素占据自己的区块,元素之间不重叠。
-![image-20210104095232481](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210104095232481.png)
+![image-20210104095232481](E:\web\lessons\课件\csspress\3.定位.assets\image-20210104095232481.png)
html:
@@ -57,7 +89,7 @@ absolute 基于父元素定位,通过 top,bottom,left,right 四个属性规定
-![image-20210104101111002](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210104101111002.png)
+![image-20210104101111002](E:\web\lessons\课件\csspress\3.定位.assets\image-20210104101111002.png)
html 不变 css如下:
@@ -79,7 +111,7 @@ div{
上面的例子里,第一个灰色的div(以下叫A)并没有出现在页面上,因为这时候给A 添加了position:absolute 属性,使他脱离正常的文档流 然后他下面(从上到下依次叫B,C),B,C并没有脱离文档流,所以会移动到上面来,把A覆盖
-![image-20210104102616301](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210104102616301.png)
+![image-20210104102616301](E:\web\lessons\课件\csspress\3.定位.assets\image-20210104102616301.png)
html:
@@ -120,7 +152,7 @@ css:
相对定位,选中元素不会脱离文档流,相对于其自身位置进行移动,通过top,bottom,left,right 属性进行规定
-![image-20210104104339420](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210104104339420.png)
+![image-20210104104339420](E:\web\lessons\课件\csspress\3.定位.assets\image-20210104104339420.png)
```
```
-![image-20210104113658613](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210104113658613.png)
+![image-20210104113658613](E:\web\lessons\课件\csspress\3.定位.assets\image-20210104113658613.png)
@@ -242,10 +274,38 @@ css:
滚动前:
-![image-20210104115013701](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210104115013701.png)
+![image-20210104115013701](E:\web\lessons\课件\csspress\3.定位.assets\image-20210104115013701.png)
滚动后:
-![image-20210104115040341](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210104115040341.png)
\ No newline at end of file
+![image-20210104115040341](E:\web\lessons\课件\csspress\3.定位.assets\image-20210104115040341.png)
+
+作业一
+
+![image-20210118172837051](E:\web\lessons\课件\csspress\3.定位.assets\image-20210118172837051.png)
+
+
+
+作业二
+
+![image-20210118172910611](E:\web\lessons\课件\csspress\3.定位.assets\image-20210118172910611.png)
+
+
+
+作业三
+
+![image-20210118172934691](E:\web\lessons\课件\csspress\3.定位.assets\image-20210118172934691.png)
+
+
+
+作业4
+
+![image-20210118173020931](E:\web\lessons\课件\csspress\3.定位.assets\image-20210118173020931.png)
+
+
+
+作业5
+
+![image-20210118173115050](E:\web\lessons\课件\csspress\3.定位.assets\image-20210118173115050.png)
\ No newline at end of file
diff --git a/csspress/csspress.zip b/csspress/csspress.zip
new file mode 100644
index 0000000..8a253cc
Binary files /dev/null and b/csspress/csspress.zip differ
diff --git a/csspress/demo/.idea/demo.iml b/csspress/demo/.idea/demo.iml
new file mode 100644
index 0000000..d0876a7
--- /dev/null
+++ b/csspress/demo/.idea/demo.iml
@@ -0,0 +1,8 @@
+
+
+