盒子
盒子
文章目录
  1. 写在前面的一些话
  2. 引子
  3. 理清思路
  4. 说说border
  5. 其他实现三角形的方法
  6. 可以回归正题了

关于前端自学的学习思路

2016.03.05 Bill Qiu  热度 ℃

写在前面的一些话

其实本来想写的文章并不是这一篇，而是想做一个技术的分享。后来在google的过程中，发现有人早就写好了我想写的内容，而且我自认为打不到他的水平。继续写原来的文章，肯定会受到很大程度上的影响。且不说算不算抄袭，万一别人看了我的文章之后发现还有更好的，不也浪费了他人的时间吗？

曾经在知乎上看到过这样一句话：

如果你不能通过自学来达到能找到工作的水平，那你还是放弃程序员这个职业吧。

很庆幸自己从系统的学习前端开始，一直都没有放弃，坎坎坷坷一路走来，也算是积累了一些经验。
在这里同大家分享。

引子

前段时间在制作一个专题页面的时候，有这样的一个效果需要实现。
more
由于专题页仅仅针对PC端，所以完全可以用图片的形式来实现，省时省力。但是一想，如果要在移动端实现这个效果呐，难道也用图片？这不仅仅增加了一次页面请求，还减慢了加载的速度，是不符合移动端开发准则的。

理清思路

如果这个专题页是基于移动端开发的，我首先想到的是用CSS来实现。好处就不多说了，加载速度杠杠的，也不用太担心兼容性问题。
于是我便google了关键词“CSS实现平行四边形”。
点击进了第一条搜索结果，用CSS实现三角形与平行四边形。
从标题看到，除了用CSS实现平行四边形，还可以实现三角形。对于一直寻求甚解的我来说肯定不会放弃这一个小细节。
看了看实现三角形的CSS代码，我当时就蒙B了

1
2
3
4
5
6
7
{
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: red transparent transparent transparent;
 }

这尼玛什么鬼，用border实现三角形，想不通啊？border还可以分开写，boder: 1px solid #ccc这不才是最常规的写法吗？
看到这儿，我知道是我自己的基础不够扎实的缘故，如果真的想要掌握这个知识点，越往后面看肯定还有很多不清楚需要查阅资料的。
于是乎，这儿就要借用思维导图工具了。在线的推荐用百度脑图，也可以去下载个XMind，都挺好用的。
之后怎么做呐，把你不懂的知识点、google的过程，一步步通过树状图罗列出来，这样你就可以随时知道你学到哪儿了，哪些知识点是你没有掌握的，对你后期的回顾和整个学习流程的把握很有帮助，形散而神不散，不会让前端庞大的知识体系给压垮了。

说说border

以前写代码的时候，一直都觉得border是个很普通、简单的属性，今日一切磋才知道是我“井底之蛙”了。
这里有一点要提一下，很多人都在w3school查阅相关的资料，不能说不好吧，但是强烈推荐使用w3schools代替w3school来使用，虽然全英文，但是耐下性子来看，只要英语不是差到无可救药的地步，还是可以看懂的。当有问题的时候，多上上stackoverflow，很快就能找到你想要的答案。这就是一个良好习惯的养成过程。

言归正传，还是来说说border吧。
在emment插件中，有一个bd+的快捷键，可以直接border: 1px solid #000;也正是因为这样的惯性思维，让我没有多去思考这个属性。

其实我们平常用的都是border的简写形式，放张图看看border包含的其他属性。
boder
其实这也只是一部分，需要深入了解的还是要自己去查阅相关资料。
再次推荐w3schools
纳尼，boder-color还可以这样写？其实你理解了这一点，也就基本上理解了实现三角形的原理。

再来看看我们google到的第一个网站
triangle

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#first {
  width: 20px;
  height: 20px;
  border-width: 10px;
  border-style: solid;
  border-color: red green blue brown;
}

#second {
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: red green blue brown;
}

#third {
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: red transparent transparent transparent;
}

其实仔细看看这了例子也差不多能明白，只能说还是太浮躁了，没用沉下心来。

其他实现三角形的方法

1. 字符法
这个方法是在张老师的博客中看到的，惊叹张老师09年的时候就想到了现如今所谓的font-icon。
强烈推荐张老师的博客，看了之后，你说不定会惊叹，TMD竟然还可以这样玩！

2. 边框法
也就是前文介绍的方法。
依旧推荐张老师博客中对边框法的介绍。

3. 其他
这就是我说的那篇介绍的挺全面的文章，反正总结的肯定会比我好。

可以回归正题了

说了这么多，不知道大家有没有把我想要搜索的正题给忘了，没错，就是“实现平行四边形”。
前面说了一大堆，好像TM完全不沾边啊。
NO, NO, NO!
其实这正是我写这篇文章的主要目的：分享解决问题的方法。
前端技术的发展日新月异，NodeJS社区每天都有一个新的API出来，要完全掌握是不可能的，但是我们可以学习解决问题的方法。从“用CSS实现平行四边形”这个问题出发，使我深入了解了border属性，更掌握了一系列实现“三角形”的方法。在学习之后，我能归纳总结我所学到的知识和存在的不足，这才是对我帮助最大的。

至于如何“用CSS实现平行四边形”，大家应该可以自行google了吧。
如果你告诉我你翻不了墙，那我只能“祝你幸福”！

End

支持一下
扫一扫，请我喝杯咖啡☕️