3月21日
今日笔记
1.为什么要学习定位
1.为了解决页面中特殊的页面效果
2.为了元素能够在页面中灵活的进行移动
2.定位的属性
主要包括两部分：
定位模式：static relative absolute fixed
偏移量: top right bottom left
3.静态定位
.box {
position: relative;
}
特点：
1.所有的标签都有静态定位，相当于没有定位
2.静态定位的元素，占据标准流的位置
3.不能使用边偏移改变元素当前的位置
4.也就是说原来怎么样还是怎么样，设置的position跟没写一样。
4.相对定位
.box {
position: relative;
left: 50px;
top: 60px;
}
1.相对定位的元素，需要设置属性position:realative;再设置一个边偏移 left /top
2.相对定位的元素不脱离标准流的位置，仍然占据原来的位置 不脱标
3.可以通过偏移量来进行位置的移动
4.是根据自身原来的位置进行的移动
5.相对定位，单纯的自身移动位置，用的并不多。一般用于限定绝对定位元素的范围。
5.绝对定位 absolute
.box {
position: absolute;
top:100px;
left: 100px;
}
1.绝对定位的元素，需要设置属性position:absolute;如果需要移动则再需要设置边偏移 left top
2.绝对定位的元素，是可以移动位置的
3.绝对定位的元素脱离标准流 ,不占据原来的位置 脱标
4.绝对定位的元素和标准流的元素如果位置有重合的话，则会盖住标准流的元素
5.当页面中有一个绝对定位的元素时，如果设置了边偏移left,top的话，参考位置是页面的左上角
6.当子元素有一个父元素，子元素是绝对定位，而父元素没有定位的时候，则当前的子元素还是以页面为参考点
7.当子元素有一个父元素，子元素是绝对定位，而父元素是相对定位的时候，则当前的子元素移动是以父元素为参考点
8.当元素有多层嵌套的时候，子元素是一个绝对定位，参考点是以离自身最近的具有非静态(static)定位的父级盒子为参考。
9.绝对定位会改变元素原来的显示方式(行内元素，会变成行内块;块级元素也会变成行内块元素)
10.绝对定位了的元素，脱离了标准流，所以再用margin:auto无效，绝对定位的元素盒子边界是以margin为边界
6.固定定位fixed
.box {
position: fixed;
top: 10%;
left: 100px;
}
特点：
1.固定定位脱离标准流，不占据标准流的位置
2.固定定位可以通过边偏移来移动位置
3.可以改变元素的显示方式(可以将行内元素变成行内块元素)
4.参考点是浏览器页面的可视区
7.定位元素的叠放次序 z-index(层级)
1.当定位的元素位置有重合的时候，会有一个默认的叠放次序
2.默认后面的元素会盖住或是压住前面的元素
3.只要是定位了的元素(不包括static定位)相当于都有一个默认的层级的概念，默认的层级是0，用z-index
4.如果要想让被压住的元素，显示在最上面，需要给被压住的元素设置一个属性z-index:最要这个值是最大，就会在最上面的显示。
5.z-index的值不要设置负数，会出现不可控的现象。
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>小米手机轮播图</title> <link rel="stylesheet" href="./base.css"> <style> .box { width: 1226px; height: 460px; margin: 0 auto; position: relative; } .arrow-left, .arrow-right { height: 100px; width: 60px; background-color: deeppink; font-size: 60px; line-height: 100px; text-align: center; position: absolute; top: 50%; margin-top: -50px; cursor: pointer; } .arrow-right { right: 0; /* 在右边贴着边显示，和左边的水平对齐 */ } .arrow-left:hover, .arrow-right:hover { background-color: lightgreen; } /* 小米轮播图小圆点开始 */ .box ol { width: 400px; height: 40px; /* background-color: rgba(0, 0, 0, .4); */ position: absolute; left: 50%; margin-left: -200px; bottom: 20px; padding: 5px 74px; box-sizing: border-box; /* 内缩减,终于不用再为增加padding之后还要减少宽高烦恼了 */ /* bsiz */ } .box ol li { width: 30px; height: 30px; background-color: #fff; float: left; margin: 0 6px; border-radius: 50%; } .box ol li:hover { cursor: pointer; } .box ol li.current { background: lightpink; } ol { list-style: none; } </style> </head> <body> <div class="box"> <img src="../images/phone.jpg" title="练了2遍，终于稳了"> <span class="arrow-left"><</span> <span class="arrow-right">></span> <ol> <li class="current"></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ol> </div> </body> </html>
效果：
自从开始做学成在线的项目之后，整个人都不好了，代码看得懂，就是默写不出来，好心累，今天老师强调了下学习方法：
学成在线的每个板块的结构样式，都要写得滚瓜烂熟，要练到一看到某个功能就知道要用什么标签来实现，达到这种地步之后，才能称为熟练使用CSS+HTML静态页面布局技术；
一个知识点/小功能至少写3遍以上，最好能默写出来，熟练了再去做另一个功能，依次类推，不然写了后面忘了前面，效率极地还浪费时间。
整个项目下来接近1000行的结构和样式代码。。。加油吧，都说万事开头难，确实挺难的，每天8点到教师，读15分钟英语单词，然后开始预习今天要学的内容，9点开始上课，把手机用透明的袋子装着交给组长，然后组长放到讲师旁边的抽屉里，12:00~14:00休息，吃饭，午睡，14:00开始中午的演讲，第一次演讲不限主题，大部分都是介绍家乡风景和特产的，以后的演讲就要限制为技术类的主题，可以介绍自己写的一个项目，或者介绍一些流行的插件或者比较新的技术之类的，还是蛮期待的。。。
今天下午有点走神了，导致讲师将小米轮播图的时候我没抗住，然后缓过神来的时候已经讲完了整个制作流程，我慌得一p，问旁边的同学，一个个说得云里雾里，最好通过晚修自己的时候看了一遍录制的视频，履了一遍思路才搞定，最后默写了2遍才感觉比较稳。。。中午确实开始要睡会午觉才行。
已经是第8天了，每天都特别充实，比自己在家学的效率高太多了，有些事真的就是亲身经历了才知道，时间真的很宝贵，只是有些人看不见时间的成本罢了，系统的学习加上牛人的辅导，的确要比自己在家看视频抄代码然后美滋滋的觉得自己会了强太多了；报了培训班，才亲眼见到真的有人为了一个功能死磕到12点多然后才回去、零基础的高中毕业生为了吃透知识点每天写到2点才睡觉，早上还要7点起床坐公交车来上课，没有丝毫怨言；对于我们这批人，如何与比自己经验多，学历好的人竞争呢？唯一的途径就是技术了，上一期就业班就有3个牛逼的学生内推去了腾讯。。。这些都是榜样啊，别人11点多回宿舍继续写代码，练习总结当天学的内容，我哪还好意思刷知乎，看短视频，差距就是这么一点一点拉大的呀。。。最后当然是希望能和我的程序媛同桌把感情培养起来，虽然她比我大6岁，但她成熟的气质已经深深迷住了我，让我更加努力地学习技术，吃透每一个知识点，在她不懂的时候，倾尽全力为她解决难题，实在不行，我偷电脑养你啊。。。
最后放一张中午下课后偷拍的图吧，纪念下我们nb的讲师（据说月薪至少40K）。
