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 @@ + + + + + + + + \ No newline at end of file diff --git a/csspress/demo/.idea/inspectionProfiles/Project_Default.xml b/csspress/demo/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 0000000..06bb031 --- /dev/null +++ b/csspress/demo/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,12 @@ + + + + \ No newline at end of file diff --git a/csspress/demo/.idea/inspectionProfiles/profiles_settings.xml b/csspress/demo/.idea/inspectionProfiles/profiles_settings.xml new file mode 100644 index 0000000..105ce2d --- /dev/null +++ b/csspress/demo/.idea/inspectionProfiles/profiles_settings.xml @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/csspress/demo/.idea/modules.xml b/csspress/demo/.idea/modules.xml new file mode 100644 index 0000000..c95e899 --- /dev/null +++ b/csspress/demo/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/csspress/demo/.idea/vcs.xml b/csspress/demo/.idea/vcs.xml new file mode 100644 index 0000000..b2bdec2 --- /dev/null +++ b/csspress/demo/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/csspress/demo/.idea/workspace.xml b/csspress/demo/.idea/workspace.xml new file mode 100644 index 0000000..c9d77e0 --- /dev/null +++ b/csspress/demo/.idea/workspace.xml @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + 1610949940462 + + + + \ No newline at end of file diff --git a/csspress/demo/boxsize.html b/csspress/demo/boxsize.html new file mode 100644 index 0000000..b9af535 --- /dev/null +++ b/csspress/demo/boxsize.html @@ -0,0 +1,37 @@ + + + + + + Document + + + +
+
aaa
+ bbb + cccc + +
+ + + \ No newline at end of file diff --git a/csspress/demo/a.html b/csspress/demo/float.html similarity index 83% rename from csspress/demo/a.html rename to csspress/demo/float.html index 0a4fd3a..81de2e9 100644 --- a/csspress/demo/a.html +++ b/csspress/demo/float.html @@ -16,11 +16,11 @@ margin: 20px; } .box1{ - width:60px; - height: 60px; + /* width:60px; + height: 60px; */ background: red; /* background: rgba(255, 0, 0, 0.363); */ - float: left; + /* float: left; */ } @@ -30,7 +30,7 @@ background: gray; border: 1px solid pink; /* float:right */ - float: right; + float: left; } .a{ /* width: 70px; @@ -43,7 +43,10 @@
-
+
asaaaa
+
+
+
\ No newline at end of file diff --git a/csspress/demo/b.html b/csspress/demo/float1.html similarity index 100% rename from csspress/demo/b.html rename to csspress/demo/float1.html diff --git a/csspress/demo/margin.html b/csspress/demo/margin.html new file mode 100644 index 0000000..ff63dd3 --- /dev/null +++ b/csspress/demo/margin.html @@ -0,0 +1,45 @@ + + + + + + Document + + + +
aaa
+
bbb
+ +

+ 总结margin 一个值得时候定义的是上下左右四个方向的边距 +

两个值得时候定义的前一个值是上下的边距 后面的值是左右的边距

+

三个值得时候第一个值是上边距 第二个值是左右边距 第三个值是下边距

+

四个值得时候是上右下左的边距

+ + + +

+ + + \ No newline at end of file diff --git a/csspress/demo/margin2.html b/csspress/demo/margin2.html new file mode 100644 index 0000000..78d0771 --- /dev/null +++ b/csspress/demo/margin2.html @@ -0,0 +1,42 @@ + + + + + + Document + + + +
中国
+
美国
+ +

+ 总结:当给中国加下边距(100px)和给美国(50)加上边距的时候 ,会发生外边距合并的现象 + 即 中国和美国的外边距等于中国和美国的外边距中较大的那个值 此例中 中美外边距为100px +

+ + + + + \ No newline at end of file diff --git a/csspress/demo/margin3.html b/csspress/demo/margin3.html new file mode 100644 index 0000000..ab39160 --- /dev/null +++ b/csspress/demo/margin3.html @@ -0,0 +1,47 @@ + + + + + + Document + + + +
+
中国
+
+ +

总结:当只给中国加上边距时,他外层的父元素也会跟着往下移动 ,这种现象叫父子级的边距合并 + 解决方式:padding-top:50px; + border-top: 1px solid white; + overflow: hidden + +

+ + + \ No newline at end of file diff --git a/csspress/demo/paddiing.html b/csspress/demo/paddiing.html new file mode 100644 index 0000000..cf46fb3 --- /dev/null +++ b/csspress/demo/paddiing.html @@ -0,0 +1,53 @@ + + + + + + Document + + + + 盘古 + 女娲 + +
京东
+ +

+ 总结:padding 一个值得时候定义的是上下左右四个方向的边距 +

两个值得时候定义的前一个值是上下的边距 后面的值是左右的边距

+

三个值得时候第一个值是上边距 第二个值是左右边距 第三个值是下边距

+

四个值得时候是上右下左的边距

+ + + +

+ + + \ No newline at end of file diff --git a/csspress/demo/position.html b/csspress/demo/position.html new file mode 100644 index 0000000..d01f779 --- /dev/null +++ b/csspress/demo/position.html @@ -0,0 +1,11 @@ + + + + + + Document + + + + + \ No newline at end of file diff --git a/csspress/demo2/boxmodel.html b/csspress/demo2/boxmodel.html new file mode 100644 index 0000000..90a363d --- /dev/null +++ b/csspress/demo2/boxmodel.html @@ -0,0 +1,55 @@ + + + + + + + Document + + + + +
+
+
+

暖暖

+
+ + + + \ No newline at end of file diff --git a/csspress/demo2/position.html b/csspress/demo2/position.html new file mode 100644 index 0000000..ab004ab --- /dev/null +++ b/csspress/demo2/position.html @@ -0,0 +1,44 @@ + + + + + + + Document + + + + +
暖暖
+
+
+ + + \ No newline at end of file diff --git a/csspress/float.md b/csspress/float.md new file mode 100644 index 0000000..94b9c03 --- /dev/null +++ b/csspress/float.md @@ -0,0 +1,3 @@ +# 浮动(float) + + \ No newline at end of file diff --git a/csspress/image-20210118112058180.png b/csspress/image-20210118112058180.png new file mode 100644 index 0000000..592a061 Binary files /dev/null and b/csspress/image-20210118112058180.png differ