最近很多来学习前端的同学，不知道前端的学习内容和学习内容有哪些，IT培训网今天整理了一些基本知识供大家参考。

前端始于切图，这应该是不容辩驳的。有些同学不爱写html和css，特别是从后端转过来的同学，我觉得这样是不行的，因为前端这个职位本来就是这么发展而来的。

和切图相关的当然就是HTML和CSS了。HTML就很浅了，你只需知道HTML4和HTML5的文档规范有哪些区别就行了。CSS的话，首先你得知道都有哪些属性，他们都用于哪些场景，能熟练地还原PC端的页面，并兼容各浏览器，就算是切图入门了。这时候你写出来的页面应该是充满了div，CSS中充满了px单位以及冗余属性。

有些人觉得能把图切出来就可以了，其实不然，路还远着呢。接下来是切图中级之旅。你需要对HTML各个标签都了如指掌，知道他们的语义和使用场景。关于CSS，你应该大致读一遍W3C规范，了解不同的盒模型(行内、块级)的布局规范，了解文档流、IFC、BFC等概念，简言之就是要 知其所以然， 通过原理来做事，而不是像以前那样靠猜和试来解决问题。

CSS的使用也是一个积累的过程，在此过程中你需要积累各种技巧，比如左右两栏自适应布局、传说中的双飞翼布局、margin负值布局、各种情况下的居中技巧等等。

到了中级的时候，你还应该掌握HTML5和CSS3中的新特性。你也要开始能做移动端的页面了。新的标签和CSS属性都要门儿清。圆角、阴影自然不在话下，你还得掌握渐变(transition)以及变形(transform)，以及动画(animation)。你做的页面不再是只用px来定死宽高，而要学着进行响应式布局，学习flexbox的布局模式。

当你做了几百张页面，能熟练写出移动端的页面，掌握各种场景下的最优布局，并且能从原理上解释一些现象。那么恭喜你，中级切图仔可以出师了。你应该感受到此时已经是一次质变了。

是的，切图之旅还没结束，来看高级的吧。高级有两个关键字：架构、性能。

先说架构。在中级出师之后你已经是切图师中的战斗机了，这时候你就应该考虑如何来架构一个整站的CSS了。为什么要架构呢?因为你在此前肯定会经历不断升级维护CSS代码的痛苦，那就是代码只增不减，旧的样式从来不敢删，每次升级都是用更高的优先级来覆盖掉旧样式。代码在修改的时候及其不灵活，有时牵一发而动全身，有时需要把相同代码复制粘贴到n个地方。

你可能会尝试把CSS代码按照模块为单位来划分，或者是自己定义的其他规则和编码规范，作为约定所有人遵守。现在的话，最佳实践就是CSS预编译(sass/less/stylus)，你应该掌握如何使用，以及如何用这些工具来架构出灵活的CSS。

关于性能，也是高级切图师要关注的。你需要了解浏览器渲染DOM树的过程，知道重绘(repaint)、回流(reflow)这两个概念，以及怎样的布局能够尽量减少回流。你应该知道硬件加速是个什么鬼，知道translate3D能开启硬件加速的原因是什么。你要学着用chrome的timeline来分析整个页面的渲染过程，哪里耗时长，该用怎样的方案来解决。

更多的前端切图技巧在IT培训网css频道可以找到更多哦。