以魔方学习前端

前言：最近在知乎上看到余弦回答的如何学习web安全，强调了数据流、输入输出，通过输入提交“特殊数据”，特殊数据在数据流的每个层处理，如果某个层没处理好，在输出的时候，就会出现相应层的安全问题。深感安全相当于逆向思考，故只有先掌握正向，才能更好的理解各种漏洞。本来有点急于求成，想直接学前后端开发一套博客系统，能够借此学习框架等。但考虑了一下，还是得慢慢来，先把前端用一些例子大致的了解了解。

一、任务：图片魔方

二、魔方模型

    
    
    


    
    
     //最外层是为了调整正方体的位置，例如居中
        
   
            

            

            

            

            

            

        
    

三、带图片的魔方

尚未理解的地方：

• url(a"+n+".png) ：不是很理解为啥是这样拼接的，感觉像字符串拼接，但为啥加号是在里面 -_-

值得深思的地方：

• box-sizing: border-box;

  我觉得这位网友的解释挺好的：

  box-sizing 最主要的用法是规定容器元素的最终尺寸计算方式。

  如果你创造了一个

  没有设置 box-sizing 属性为 border-box(不设置的话默认值为 content-box.)，同时你设置 width:100px; border:10px solid red; padding:10px; 那么最终 div 容器的实际宽度为：

  100px(width)+210px(padding)+2*10px(border)=140px

  所以你会得到一个比你预期（100px）还要更大的容器，结果就是会破坏网页布局。

  注意：容易 margin 的尺寸不会被计算入最终容器宽度，因为对他的定义为对这个容器的留白，但不属于容器本身。

  如果当我们定义一个容器的 box-sizing 属性为 border-box 时（表达式：br{box-sizing:border-box}），那么我们创建一个和上段中相同设置的

  容器时，那么他的最终宽度即为 100px, 那么它的内容部分（content）的有效宽度变成了 100px-2*10px-2*10px =60px; 所以你会得到一个你预期大小的盒子容器，但是只是被压缩了内容部分尺寸而已，但是对于整体布局而言益处颇多。

四、带动画的魔方

感悟：以完成动画效果为目的，看了过渡与动画的教学视频。过渡就是从一个状态到另一个状态，关键字：transition 。动画则是多个状态组成，制定动画规则：@keyframes 引入动画 ：animation 。但是实现时，发现css的语法有点冗余，例如实现每一小块的动画效果：.box-page div:nth-child(1) 要连续写9次，不知道有没有类似for循环的方法来改善代码冗余的情况。

五、总结

这次主要是通过一个明确的任务为目标去了解一下前端，感觉自己没办法耐下心来把前端完整的过一遍，所以选择了这个方法。当然，这只是出于了解的目的，如果真的要形成前端的知识体系，我觉得还是得学习完整的教学。

魔方制作教学视频：https://www.icourse163.org/learn/BJFU-1003382003?tid=1206736215#/learn/content?type=detail&id=1211761327