1、对于scss的嵌套写法，其实可以极大程度的缩减代码，比如你可以定义5个相同模块的却有不同背景色的布局，那么你可以统一写一个
然后在热定的第几号伪类元素中，修改特定样式。
2、样式的继承与选择，只要层级不乱，祖先级可以直接跳转至孙辈级。
如图，我跳了一层el-carousel__contianer,但是样式依旧生效。说明样式继承可以跳跃。
3、如果在一个盒子中，定义多个标签，那么标签之间会相互挤压，导致溢出或者变形。
可以看到图片因为P标签的占用文档导致高度被挤压。此时应当使用定位去解决。
然后还是发生了img被挤压的问题，但是经过20分钟的元素审查，才发现是 element-ui自带的元素样式问题。
果然框架虽然省时，但是还是有一点小BUG的。
4、对比左侧（官方），右侧（个人仿制）
虽然说整体相似度99%但是仍有一个问题，就是最下方官方的图片有一层蒙版，用户体感较适。
经审查元素
果然，官方多了一层蒙版，这一层蒙版是使
区域变半透明黑色。
5、还是元素层级优先级的问题，在修改element-ui走马灯效果的底部轮播按钮颜色时，
我找到好多层级都发现不能覆盖。要么就是直接两个
会变成相同的颜色，。后来发现直
其实很简单，只要最外层类名覆盖就可以。
6、
当我故作聪明用padding撑开内容区域时，发现，原来background-image那一层蒙版就扩大了，导致极不良好的体验，所以，item之间要三思而用，padding或者margin。
padding易于分块且精准。而margin分块需计算但互不干扰。
7、当我浏览美团网的时候，发现调整窗口大小，布局会呈现4-5张的效果。如下
我思考了下，大致思路应该是这样的。
首先判断浏览器的document.body.clientWitdh。或者@media CSS
在800px-1000px 改变大盒子宽度比如固定850px
在1000px以上 改变大盒子宽度比如固定1200px
那么问题来了，里面的电影数量怎么改变呢。
思路也如上，就是更具父盒子宽度改变每页幻灯片个数。
我尝试了下。
代码的核心就是v-for嵌套v-if语句，通过修改一个pageMovieNum值，进而使整个走马灯改变。
底下是有走马灯效果的，pageMovieNum:2,就是每页2个film-item。共8/2=4页
8、然后是关于以前喜欢用连写的格式写代码，今天才发现代码的每个属性都很重要尤其是在用框架的时候，得清楚知道我到底需要改哪一个属性。
9、vue，v-for遍历数组的问题。如图
为何要指定0，menuMovie有很多分类，你要指定第几类的child这个数组遍历，如果少了0（指定下标）那么就会返回undefined。
注vue的三大类，Object对象,String字符串,Array数组.
10、页面基础布局，尤为重要，如：
绿线以下的部分很简单，就是一个<section>然后margin: 0 auto即可，
绿线以上的部分看似简单，实则需要2层div。最外边一层<article>是为了平铺绿线（用户体感），而内层则是<header> margin:0 auto则起到居中内容