2019年3月19日-20日，前端CSS 巩固性学习、大白制作

1、VUE 根据路由跳转得到情况去相应增加过渡动画。首先判断路由跳转的路径to,f rom

2、CSS渐变的类型有2种，一种是径向渐变，一种是渐变。
我用了径向渐变适用于万里学院的 移动弹窗
radial-gradient(circle, #8181fc 2%, #8c5cff 100%);

3、移动弹窗用的是绝对定位，又引出一个新问题，那就是z-index的作用域，以及作用效果。
如图
我弹窗定位的是body标签，而菜单栏的a:before只是定位在a标签上，我一直以为越外层容器的定位，一定会将里层容器覆盖，其实不然，这只是未设置z-index值的默认规定，一旦设定了z-index值,
1、relative将先排序容器的层级


显而易见了吧，但是一旦你设定了a的z-index值，且body的z-index未修改即1
那么层级就严格按照z-index来，但是又不然 还得看 元素的父子集z-index的关系反正如果要是够用，你就严格设置z-index的高低，进行优先级降序。
下面引用大佬的总结。
z-index优先级小结
z-index是深度属性，设置元素在z轴上面的堆叠顺序。

强调：z-index必须和定位元素position:absollute|relative|fixed一起使用，否则无效

1.z-index属性（number越大优先级越高）

2.特殊情况

（1）相同z-index：

   1）如果两个元素都没有定位发生位置重合现象或者两个都已定位元素且z-index相同发生位置重合现象，那么按文档流顺序，后面的覆盖前面的。

   2）如果两个元素都没有设置z-index，使用默认值，一个定位一个没有定位，那么定位元素覆盖未定位元素。

（2）父子z-index关系处理：

   1）如果父元素z-index有效，那么子元素无论是否设置z-index都和父元素一致，在父元素上方

   2）如果父元素z-index失效（未定位或者使用默认值），那么定位子元素的z-index设置生效 

（3）兄弟子元素z-index关系处理：

   1）如果兄弟元素的z-index生效，那么其子元素覆盖关系有父元素决定

   eg：虽然第一个div的子元素（即s1）的z-index比较高，

         但是由于其父元素（即f1）z-index比第二个平级div（即f2）低，

         所以第一个div子元素（即s1）会被第二个父辈div（即f2）及其子元素（即s2）覆盖

上文源自于https://www.cnblogs.com/Begin-Vic/p/6413984.html

3、要掌握框架就必须了解框架的每一个文件，刚找自己引入的公共link找了好久，才发现在根目录的index.html里

4、有一处细节问题，就是关于span标签未设置块级元素，仅能触发margin-left,margin-top无效。


给元素标识块级即可使margin-top生效

5、hover伪元素确实适合绝大多数电商企业的高效率发展的节奏，但是并不能满足一些细节方面的需求。
比如：我想让万里学院的“三位一体”弹窗
1、在进入页面时，出现渐现的效果。
2、用户不点击隐藏，绝对一致出现在最左上角。
3、当用户点击隐藏后，得考虑用户突然又想看，总不能点刷新吧，得引导用户触发。 展示下效果：

上述效果，配合了mouseleave以及mouseout效果，其实就是:hover伪类的具象表达函数，但是:hover伪类没有判断条件，只要你滑动移出必触发，所以就需要mouse函数的支持判断，用户是否以及点击。isClose默认为false。点击置为true。有的人可能会说这么简单的东西。
确实，这么简单的东西，我却思考了1个多小时，因为我在尝试，尝试了多种多样的方法，最起初就是纯css想实现，发现你无论把hover放在哪里，因为css是无法设置函数的（注，经查，有一个属性可以设置元素是否冒泡。

但是我觉得，无法理解，继续百度之后，发现并不是楼上所说的组织事件冒泡，只是新加的一个css属性，叫穿透。

继续，因为CSS无法触发函数判断，所以，你要想实现逻辑，必须通过赋予判断语句。就必须使用js或者一些方法。才能达到目的。


2019年3月20日11:26:14 先做完柴老师布置的作业，再干自己的活。

看到这张图，思路就来了，我决定用自己的方式也是position，先尝试一下。再看看和源代码有什么区别，取长补短。
1、需求分析
a、实现大白的各个部位运动
b、实现大白scroll-X轴的走动

我设计了两种方案：
第一种：3个大盒子，3个中盒子。小盒子就是各个部位，暂略。

为什么要这么设计？
1、el-container 这一层是最外层容器，可以保证你的内容居中显示。
2、m-container 是内容宽度大小，根据@media自适应
3、m-item-wrapper是包裹大白的自撑开宽高的盒子。
我觉得以上因素必须考虑到，一个也不能少。可以多盒子，少盒子将引发一系列连锁问题。
第二种
如果上述将大白的身体层级分成三个部分，就意味着三个部分都要用到relative，然后relative也要微调，因为毕竟大白不是方的。那么比较容易想到的一种就是只用一个relative,所有absolute关于它定位
body-wrapper 用height:auto 里的body-up和body-down自撑开之后的头 脚 手 等等 都关于它进行绝对定位

但是简单的问题也可以很复杂，还有第三种，那就是因为多了手指头的原因。

仔细思考，手指头理论上应该是关于手臂绝对定位，才合情合理。
那么综上讨论，身子是定位的核心，手臂头 脚 都设置关于身子的相对定位，
综合二、三想法，我的最终构造如下。

2019年3月20日15:15:32
本来决定用sublime最原始的html+CSS去编写，发现浏览器不会自动渲染，一次次点刷新有点费时，所以还是决定用vue去写。

因为定位的元素实际可用脱离文档流，但是relative定位他的文档位置实际根据他的宽高定，无论你移动到哪里都占据原来的文档流所以必须在设计身体的高度完成之后，自己重新设定wrapper的宽高。