目录
一、定位（重点）
1.静态定位
2.相对定位
3.绝对定位
4.固定定位
5.定位元素的层叠效果
二、css3和css2的区别
1.内减模式
2.新增属性选择器
3.新增伪类选择器
4. 2d变换效果
5.过渡效果
一、定位（重点）
定位的使用：
1.4种定位方式：静态、相对、绝对、固定
2.4种边偏移属性：left、right、top、bottom
注意：偏移值准确的理解是“距离什么位置有多少像素” 。 如 top:100px; 距离顶部为100像素 （向下走）
1.静态定位
所有标准流都是静态定位
语法：position:static
<head><meta charset="utf-8"><title></title><style type="text/css">.box{width:100px;height:100px;border:1px solid #000;position:static;/* 设置静态定位 */top:20px;/* 设置边偏移 */}.box1{width:200px;height:200px;background:#f00;}</style></head><body><div class="box"></div><div class="box1"></div></body>
总结：
1.工作中用的比较少，因为加了静态定位，元素也是标准流
2.偏移值对静态定位无效
使用场景：通常是将已经设置过定位的元素还原成标准流
我们以后所说的定位不包含静态定位
2.相对定位
相对于自身在标准流的位置进行定位移动
语法：position：relative
<head><meta charset="utf-8"><title></title><style type="text/css">.box{width:100px;height:100px;border:1px solid #000;position:relative;/* 设置相对定位 */top:20px;/* 设置边偏移 */left:30px;}.box1{width:200px;height:200px;background:#f00;}</style></head><body><div class="box"></div><div class="box1"></div></body>
总结：
1.相对定位参考自身在标准流中的位置进行偏移，移动的出发点是自身标准流的位置
2.不会对标准流的元素造成影响，没有脱离文档流，移动之后，自身在标准流中还占有空间，真正占得位置还是标准流的位置（灵魂不在 肉体永驻）
3.可以盖在标准流的上方
使用场景：微调元素和配合绝对定位来实现效果
3.绝对定位
从父元素一直往上找设置过定位的直系父元素，作为自己的偏移参照物，找不到就继续往上找，直到html停止
语法：position:absolute
<head><meta charset="utf-8"><title></title><style type="text/css">.box{width:100px;height:100px;border:1px solid #000;position:absolute;/* 设置绝对定位 */top:20px;/* 设置边偏移 */left:30px;}.box1{width:200px;height:200px;background:#f00;}</style></head><body><div class="box"></div><div class="box1"></div></body>
总结：
1.偏移位置参考设置过定位（相对/绝对/固定）的直系父元素或直系祖宗元素，没找到就一直往上级找，直到html
2.会脱离标准流，不再继承父级的宽度（不论是块元素还是行元素，盒子的大小取决于其中内容），可以定义宽高，不占据标准流的空间
3.margin:auto对于设置过绝对定位的元素不起作用
4.设置方向偏移的时候，横向或者纵向只设置一个即可，设置多个没有意义
使用场景：配合相对定位使用（一般都会配合相对定位，但不是绝对的都是相对定位）
父相子绝
案例：
1.让盒子水平垂直居中（水平居中，垂直也居中）
<head><meta charset="utf-8"><title></title><style type="text/css">.box{width:100px;height:100px;border:1px solid #000;position:absolute;/* 设置绝对定位 */top:50%;/* 设置上边偏移 */margin-left:-50px;/* 往左边移动自身宽度的一般 */left:50%;/* 设置做边偏移 */margin-top:-50px;/* 往上面移动自身高度的一半 */}</style></head><body><div class="box"></div></body>
2.图片上加logo
<head><meta charset="utf-8"><title></title><style type="text/css">.box{width:290px;height:163px;position:relative;/* 父元素设置相对定位 */}.logo{width:52px;height:36px;background:url(2.png);position:absolute;/* 设置logo为绝对定位，父元素为相对定位，偏移位置相对父元素 */right:0;/* 最右边 */top:0;/* 最上面 */}</style></head><body><div class="box"><img src="1.gif" /><span class="logo"></span></div><div class="box"><img src="1.gif" /><span class="logo"></span></div></body>
总结：父元素使用相对定位（不脱离标准流，写多个不会覆盖），子元素绝对定位（相对于父盒子的位置） ---父相子绝
3.轮播图布局（以京东为例）
<head><meta charset="utf-8"><title>无标题文档</title><style>.box{width:590px;height:470px;margin:0 auto;border:1px solid #000; position:relative;/* 设置相对定位，因为左右按钮和下面的小圆点都需要在当前元素上面 */}ul,ol{list-style:none;padding:0;margin:0;}ul li{display:none; }ul li.on{display:block;}ol{width:152px;height:18px; position:absolute;/* 设置绝对定位，相对于父元素进行偏移 */left:46px;/* 左边偏移 */bottom:20px;/* 下面偏移 */}ol li{float:left;width:10px;height:10px; border-radius:50%;border:1px solid #fff;margin:4px;}ol li.on{width:4px;height:4px;border:4px #999 solid;background:#fff; }.box>a{text-decoration:none;color:#fff;background:#666;width:24px;height:40px;display:block;text-align:center;line-height:40px;position:absolute;/* 设置绝对定位，相对父元素进行偏移 */top:50%;/* 上边偏移 */margin-top:-20px;/* 向上移动自身高度的一半，已达到居中的效果 */}.box>a.left{left:0; /* 左按钮左边偏移为0，在最左边 */}.box>a.right{right:0; /* 右按钮右边偏移为0，在最右边 */}</style></head><body><div class="box"><ul><li class="on"><a href="###"><img src="img/banner1.jpg" /></a></li><li><a href="###"><img src="img/banner2.jpg" /></a></li><li><a href="###"><img src="img/banner3.jpg" /></a></li></ul><ol><li class="on"></li><li></li><li></li></ol><a class="left" href="###"><</a><a class="right" href="###">></a></div></body>
4.固定定位
以浏览器作为参考进行偏移，且滚动条对固定定位无效
语法：position:fixed
<head><meta charset="utf-8" /><title></title><style type="text/css">.box{width:300px;height:200px;background:#abcdef;position:fixed;/* 设置固定定位，相对于浏览器窗口 */left:50%;top:50%;margin-left:-150px;margin-top:-100px;}.text{width:20px;}</style></head><body><div class="text">日照香炉生紫烟，遥看瀑布挂前川。飞流直下三千尺，疑是银河落九天。</div><div class="box"></div></body>
总结：
1.会脱离文档流，不占据标准流的空间
2.不继承父元素的宽高，需要给自身定义宽高
3.margin:auto对固定定位的元素不起作用
4.不会随着滚动条滚动，永远固定在浏览器窗口中的位置（移动的出发点：浏览器窗口，滚动条对设置了固定定位的元素无效）
使用场景：常用于网页右下角的“回到顶部”，或网站左右两侧的广告
案例：
京东最右侧的小列表
<head><meta charset="utf-8"><title>无标题文档</title><style>*{padding:0;margin:0;}.container{height:2000px;border-right:5px #7A6E6E solid; }ul{list-style:none;padding:0;margin:0; position:fixed;right:5px;top:50%;margin-top:-95px;}</style></head><body><div class="container"><ul><li><a href="#"><img src="img/1.jpg" /></a></li><li><a href="#"><img src="img/2.jpg" /></a></li><li><a href="#"><img src="img/3.jpg" /></a></li><li><a href="#"><img src="img/4.jpg" /></a></li><li><a href="#"><img src="img/5.jpg" /></a></li></ul></div></body>
四种定位总结
5.定位元素的层叠效果
控制“定位”元素的叠放层级
语法：z-index:值
取值：
1.数字：
正数，数字越大，层级越高，离用户越近
负数，数字越小，层级越低，离用户越远
2.auto：（默认值）和父元素层级相同
3.正数比auto大，负数比auto小
<head><meta charset="utf-8" /><title></title><style type="text/css">/* 两个盒子都设置相对定位并偏移，中间有重叠的部分，默认后设置的会覆盖先设置的 */.box{width:100px;height:100px;background:#f00;position:relative;top:50px;z-index:2;/* 设置层叠高一点，会覆盖后设置的 */}.box1{width:200px;height:200px;background:#0f0;position:relative;left:50px;}</style></head><body><div class="box"></div><div class="box1"></div></body>
总结：
1.z-index只针对定位元素有效果（但不包括静态定位）
2.z-index值越大，层级越高
3.如果父元素已经比较过层级了（父元素“都有”z-index的时候，并且值不为auto），那么子元素与子元素之间是不会再去比较的
出题：上大盒子压住下大盒子 ，下大盒子里面的子元素压住上盒子
二、css3和css2的区别
css3在原有的基础上新增了很多css属性选择器，伪类选择器，伪对象选择器以及动画
H5=html5 + css3 +js
大前端：js
1.内减模式
可以将padding内边距和边框带来增大盒子的影响去掉
语法：box-sizing:border-box;
<head><meta charset="utf-8"><title>无标题文档</title><style>.box{width:200px;height:200px;background:#099;border:20px solid #333;padding:50px;box-sizing:border-box;/* 设置内减模式 */ }</style></head><body><div class="box"></div></body>
总结：不能去margin带来盒子大小的影响
2.新增属性选择器
a) 语法：元素[属性^=值]
选择以指定字符开头的属性值的元素
<head><meta charset="utf-8"><title>无标题文档</title><style>[name^='user']{color:red; }</style></head><body><div name="username">这是盒子1</div><div name="user-name">这是盒子2</div><div name="name user">这是盒子3</div><div name="user_name">这是盒子4</div><div name="user">这是盒子5</div></body>
b) 语法：元素[属性$=值]
选择以指定字符结尾的属性值的元素
<head><meta charset="utf-8"><title>无标题文档</title><style>/* 属性值以指定字符结尾的元素 */[name$="e"]{ color:red; }</style></head><body><div name="username">这是盒子1</div><div name="user-name">这是盒子2</div><div name="name user">这是盒子3</div><div name="user_name">这是盒子4</div><div name="user">这是盒子5</div></body>
3.新增伪类选择器
总结：重点：li:first-child li:last-child li:nth-child(n) li:nth-child(2n+1)奇数元素
4. 2d变换效果
可以设置移动，旋转，大小
语法：transform:值
a)移动
语法：transform:translate(值1,值2);
取值：第一个值代表横向移动的像素，第二个值代表纵向移动的像素
<head><meta charset="utf-8"><title>无标题文档</title><style>.box{width:200px;height:200px;background:#f00; }.box:hover{transform:translate(50px,20px); /* 横线移动和纵向移动 *//*transform:translateY(50px);*/}</style></head><body><div class="box"></div></body>
多学一招：只设置x轴或者y轴的移动可以使用translateX和translateY，里面只设置一个值即可
b)旋转
语法：transform:rotate(角度);transform-origin:横向坐标 纵向坐标;
取值：
1.角度写法：数字deg。
2.横向坐标和纵向坐标确定旋转的圆心，可以是像素，也可以是关键字(left,right,top,bottom,center)，不设置的话，旋转的圆心默认是中心点
<head><meta charset="utf-8"><title>无标题文档</title><style>.box{width:200px;height:200px;background:#f00;margin:200px;border-left:10px solid #0f0;border-bottom:10px solid #00f;}.box:hover{transform:rotate(45deg);/* 设置旋转和角度 */transform-origin:left top;/* 设置旋转的圆心 */}</style></head><body><div class="box"></div></body>
c)缩放
语法：transform:scale(值)
取值：倍数，可以是整数（正整数，放大），也可以是小数(0-1之间，缩小)
<head><meta charset="utf-8"><title>无标题文档</title><style>.box{width:200px;height:200px;background:#f00;}.box:hover{transform:scale(2); }</style></head><body><div class="box"></div><p>asdf</p></body>
多学一招：如果有两个值，第一个代表宽度比例，第二个代表高度比例
5.过渡效果
是一个动画的效果
语法：transition:动画css属性 过渡时间秒数 速度类型 延迟的秒数
取值：第一个值，写css属性名称，就是要发生改变的css属性，第二个值是时间单位s秒，第三个值是发生改变的曲线linear匀速，ease先慢后快再慢，第四个值可以定义动画在几秒后开始
<head><meta charset="utf-8"><title>无标题文档</title><style>img{display:block;margin:50px auto;border:1px solid #000;/* 加过渡效果，必须是在元素原本的样式上面加，不在伪类上加 */transition:transform 2s linear;}img:hover{transform:scale(1.5); }</style></head><body><img src="img/meinv.jpg" /></body>
