lesson03-css进阶
视频1-1-回顾+作业讲解
登陆页面
-----------------------------------------------------------------
视频2-盒子模型
ppt
一层：边框border ：一般都设置：1px solid 颜色
二层：内容content
内边距padding
三层：背景图像，背景色background
四层：外边距margin
比如：快递就是一个border，物品就是content，填充物就是padding，离开其他盒子距离就是外边距margin
1-border
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 height:200px; 9 width:200px; 10 /*background: #52a6f7;*/ 11 /*border:1px solid red;*/ 12 border-top:10px double red; /*上边框 双红线*/ 13 border-right:20px dotted skyblue; /*右边框 蓝点*/ 14 border-bottom:30px dashed green; /*底边框 绿虚线*/ 15 border-left:40px solid blueviolet; /*左边框 紫实线*/ 16 } 17 </style> 18 </head> 19 <body> 20 <div></div> 21 </body> 22 </html>
-------------------------------------------------------
2-padding //f12，边框，使用div就不要用padding，会破坏边框大小
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 height:200px; 9 width:200px; 10 background: #52a6f7; 11 /*padding-top:20px;*/ 12 /*padding-right:20px;*/ 13 /*padding-bottom:20px;*/ 14 /*padding-left:20px;*/ 15 /*padding会往外部撑大盒子*/ 16 17 /*padding的复合样式写法：上右下左*/ 18 /*padding:10px 20px 30px 40px;*/ 19 20 /*上右下,左=右*/ 21 /*padding:10px 20px 30px;*/ 22 23 /*上右,下=上,左=右*/ 24 /*padding:10px 20px;*/ 25 26 /*上右下左均为20*/ 27 padding:20px; 28 } 29 </style> 30 </head> 31 <body> 32 <div>很高兴认识大家,希望大家都能顺利升班</div> 33 </body> 34 </html>
-------------------------------------------------------
3-margin //外边距，盒子和盒子之间
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .test{ 8 background: blueviolet; 9 /*margin-top:100px;*/ 10 /*margin-right:100px;*/ 11 /*margin-bottom:100px;*/ 12 /*margin-left:100px;*/ 13 margin:100px; /*和其他盒子的四周外边距都离开20px*/ 14 } 15 .box{ 16 height:200px; 17 width:200px; 18 background: #52a6f7; 19 margin-top: 20px; /*和其他盒子的上外边距离开20px*/ 20 } 21 </style> 22 </head> 23 <body> 24 <div class="test">我就是我，不一样的烟火，每个人最大的敌人是自己，我们需要做的就是每天战胜自己的软弱， 超越自己，每天都让自己比前一天更进一步，加油加油 25 </div> 26 <div class="box"></div> 27 </body> 28 </html>
-------------------------------------------------------
注意四点：
A：margin调整内部div外边距；
B：padding调整外部div内边距，它调整的是自身大小，所以如果不希望破坏外观，则尽量使用margin布局（padding有可能撑大外盒子，但如果是margin过大，则盒子内容会被挤出，但不会改变盒子本身大小）；
C：border内部div和外部div定位时需要找到边界，外部div如没有设置border，则内部div的margin设置时会一直往上找，直到找到边界位置。
D：内部相邻div间的margin，取值为两个div各自设置margin的最大值，而不是相加值。
4-外边距问题：padding和margin测试对比
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .pad{ 8 height:200px; 9 width:200px; 10 background: skyblue; 11 padding-left:200px; /*盒子往左填充200px，盒子变大*/ 12 } 13 .mar{ 14 /*盒子位置不变*/ 15 height:200px; 16 width:200px; 17 background: blueviolet; 18 } 19 .mar>div{ 20 height:100px; 21 width:100px; 22 background: gray; 23 margin-left: 300px; /*盒子离左外边距200px，盒子往右移动*/ 24 } 25 </style> 26 </head> 27 <body> 28 <div class="pad">padding测试</div> 29 <div class="mar"><div>margin测试</div></div> 30 </body> 31 </html>
-------------------------------------------------------
5-内边距问题
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /*<!--外部border定位-->*/ 8 .out{ 9 height:200px; 10 width:200px; 11 background: #52a6f7; 12 border: 1px solid #52a6f7; /*设置边框让这个盒子固定*/ 13 } 14 .inn{ 15 height:100px; 16 width:100px; 17 background: green; 18 /*margin-top:20px;*/ /*外层盒子中没有设置border的话，top会使得2个盒子一起往下移动20px*/ 19 margin:auto; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="out"> 25 <div class="inn"></div> 26 </div> 27 28 </body> 29 </html>
-------------------------------------------------------
6-内边距问题2
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .top{ 8 height:200px; 9 width:200px; 10 background: #52a6f7; 11 margin-bottom:100px; 12 } 13 .bottom{ 14 /*内部相邻div间的margin，取值为两个div各自设置margin的最大值，而不是相加值。*/ 15 height:200px; 16 width:200px; 17 background: blueviolet; 18 margin-top:50px; /*2个盒子中间距离仍然是100，而不会相加，因为top中100px最大*/ 19 } 20 </style> 21 </head> 22 <body> 23 <div class="top"></div> 24 <div class="bottom"></div> 25 </body> 26 </html>
-------------------------------------------------------
css重置-ppt
浏览器在解析某些标签的时候，本身就自带了一些样式，导致我们写样式的时候就会效果不一致
公司里会根据每个公司的业务不同，会自己写一套属于自己公司的RESETCSS
比如：
*{
margin:0
padding:0
}
视频3-浮动+定位
7-浮动
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 ul{ 8 list-style: none; /*去除列表前面的黑点*/ 9 } 10 li{ 11 height:20px; 12 width:50px; 13 background: #52a6f7; 14 float:left; /*变成一行显示，ABC左浮动--列变行*/ 15 margin-left:20px; /*左边距20*/ 16 } 17 </style> 18 </head> 19 <body> 20 <ul> 21 <li>1</li> 22 <li>2</li> 23 <li>3</li> 24 </ul> 25 </body> 26 </html>
-------------------------------------------------------
8-高度塌陷 浮动带来的问题
//推荐使用第三种
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .out{ 8 border:10px solid red; 9 /*高度塌陷解决方式：第一种方式，只适用纯浮动的页面布局*/ 10 /*overflow: hidden;*/ 11 } 12 .out>div{ 13 height:100px; 14 width:100px; 15 } 16 .left{ 17 background: #52a6f7; 18 float:left; /*左浮动之后会造成高度塌陷*/ 19 } 20 .right{ 21 background: blueviolet; 22 float:right;/*右浮动之后会造成高度塌陷*/ 23 } 24 /*高度塌陷解决方式：推荐使用第三种方式*/ 25 /*定义clearfix公共类，把clearfix加入class="out clearfix" */ 26 .clearfix::after{ 27 display: block; /*转换为块级元素*/ 28 clear: both; 29 content: '';/*空字符*/ 30 } 31 </style> 32 </head> 33 <body> 34 <div class="out clearfix"> <!--clearfix解决高度塌陷--> 35 <div class="left"></div> 36 <div class="right"></div> 37 <!--高度塌陷解决方式：第二种--> 38 <!--<div></div>--> 39 </div> 40 </body> 41 </html>
-------------------------------------------------------
9-固定定位---//窗口不管如何变化，盒子始终固定在游览器的某个位置
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 height:200px; 9 width:200px; 10 background: #52a6f7; 11 12 /*始终固定在浏览器的某个位置*/ 13 position:fixed; 14 /*位移由以下值决定*/ 15 right:20px; 16 bottom:50px; 17 } 18 </style> 19 </head> 20 <body> 21 <div></div> 22 </body> 23 </html>
-------------------------------------------------------
10-相对定位
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 height:100px; 9 width:100px; 10 } 11 .test{ 12 background:skyblue; 13 /*不脱离文档流*/ 14 position:relative; 15 left:800px; /*离左边距800，往右移动800*/ 16 } 17 .tar{ 18 background: blueviolet; 19 } 20 </style> 21 </head> 22 <body> 23 <div class="test"></div> 24 <div class="tar">参照物</div> 25 </body> 26 </html>
-------------------------------------------------------
11-绝对定位
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 height:100px; 9 width:100px; 10 } 11 .test{ 12 background:skyblue; 13 /*绝对定位:脱离文档流*/ 14 position:absolute; 15 left:300px; /*蓝盒子往右移动800后脱离了文档，tar紫盒子就顶上了蓝盒子的原先位置*/ 16 } 17 .tar{ 18 background: blueviolet; 19 } 20 </style> 21 </head> 22 <body> 23 <div class="test"></div> /*定位对象是游览器*/ 24 <div class="tar">参照物</div> 25 </body> 26 </html>
-------------------------------------------------------
12-定位应用:父相子绝
父级使用相对定位，子级使用绝对定位
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /*父级使用相对定位，子级使用绝对定位*/ 8 .out{ 9 height:500px; 10 width:500px; 11 background: #52a6f7; 12 position:relative; /*用相对定位*/ 13 } 14 .inn{ 15 height:100px; 16 width:100px; 17 background: blueviolet; 18 position:absolute; /*使用绝对定位*/ 19 bottom:20px; 20 right:10px; 21 } 22 .inn1{ 23 height:100px; 24 width:100px; 25 background: blueviolet; 26 position:absolute; /*使用绝对定位*/ 27 top:400px; 28 left:10px; 29 } 30 31 </style> 32 </head> 33 <body> 34 <div class="out"> 35 <div class="inn"></div> 36 <div class="inn1"></div> 37 </div> 38 </body> 39 </html>
-------------------------------------------------------
13-z-index --千层饼式，
//2张图片叠加了 ，z-index值越大，就在上层
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 ul{ 8 list-style:none; /*去掉点*/ 9 } 10 img{ 11 height:200px; 12 width:800px; 13 position:absolute; /*子级--绝对定位:脱离文档流*/ 14 } 15 div{ 16 height:200px; 17 width:800px; 18 position:relative; /*父级--相对定位-不脱离文档流*/ 19 } 20 </style> 21 </head> 22 <body> 23 <div> 24 <ul class="pic"> 25 <!--2张图片叠加了 ，z-index值越大，就在上层--> 26 <li><img style="z-index:10;" src="https://res.shiguangkey.com//file/201806/19/20180619142252602590185.jpg"></li> 27 <li><img style="z-index:1;" src="https://res.shiguangkey.com//file/201806/19/20180619141337485823895.jpg"></li> 28 </ul> 29 </div> 30 </body> 31 </html>
-------------------------------------------------------
14-作业框架
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin:0; 9 padding: 0; 10 } 11 ul{ 12 list-style:none; 13 } 14 .out{ 15 height:200px; 16 width:800px; 17 background: #52a6f7; 18 margin:20px auto; 19 position:relative; 20 } 21 .btn{ 22 height:200px; 23 line-height:200px ; 24 } 25 .btn .left{ 26 float:left; 27 margin-left: 20px; 28 } 29 .btn .right{ 30 float: right; 31 margin-right: 20px; 32 } 33 .tab li{ 34 height:10px; 35 width: 10px; 36 border: 1px solid white; 37 border-radius: 50%; 38 float:left; 39 margin-left:10px; 40 } 41 </style> 42 </head> 43 <body> 44 <div class="out"> 45 <!--<ul class="pic">--> 46 <!--<li></li>--> 47 <!--<li></li>--> 48 <!--<li></li>--> 49 <!--<li></li>--> 50 <!--</ul>--> 51 <!--<ul class="btn">--> 52 <!--<li class="left"><</li>--> 53 <!--<li class="right">></li>--> 54 <!--</ul>--> 55 <ul class="tab"> 56 <li></li> 57 <li></li> 58 <li></li> 59 <li></li> 60 </ul> 61 </div> 62 </body> 63 </html>
-------------------------------------------------------
视频4-作业+总结
总结：
css进阶
1.盒子模型:
border:1px solid red;
padding:上右下左,撑大盒子
margin:上右下左,A:内外盒子顶部想要有间距的时候,外部盒子必须要设置border(边界)B:相邻盒子间间距,取最大值,而不是相加值
z-index:层级
2.css重置:
*{
margin:0;
padding:0;
}
3.浮动
一列变一行
高度塌陷:
.clearfix::after{
display:block;
clear:both;
content:"";
}
4.定位:
固定定位:浏览器窗口,脱离文档流
相对/绝对定位:父相子绝
-----------------------
图片地址：
1.src="https://res.shiguangkey.com//file/201806/19/20180619142252602590185.jpg"
2. src="https://res.shiguangkey.com//file/201806/19/20180619141337485823895.jpg"
3. src="https://res.shiguangkey.com//file/201806/21/20180621150342030454625.jpg"
4. src="https://res.shiguangkey.com//file/201805/17/20180517113424433990524.jpg"
作业：图片轮播
1，鼠标滑入，左右箭头
2，点的背景变白
