最近想趁着工作不忙的间隙，疯狂的敲一段时间的前端代码。我反思了一下为什么我无法快速写好前端的一个原因，就是看的多，写的少。前端的知识结构比较琐碎凌乱。所以如果不大量的练习直到熟练，在具体的开发中是会遇到各种各样的问题的，这也是导致很多人学前端一直迟迟无法做出作品的重要原因。 本身我有后端的基础，前端的基础知识点大部分我还是有比较深的印象的，这次写代码主要是加深下对常用知识点的理解深度。并且多做案例，多总结套路。最后形成自己对前端的知识结构。 如果后续有机会，我会以公开课的形式和大家进行探讨交流。 今天主要记下border-box这个属性的理解。 border-box是css3中新增的属性，与之前的区别在于对于宽度的计算方式上有所区别： 以前block模块的宽度计算方式为：width=内容的宽度。整个div的宽度计算有几个 content+padding+border 那么box-sizing:border-box后，宽度的计算就发生了改变变成如下的方式： width=content 具体例子和说明大家可以参照下边的这篇文章，说的还是好理解的 http://www.html-js.com/article/2511