欲练JS，必先攻CSS——前端修行之路

今天我讲的主题是css，具体聊一下我大概的css学习历史，分享一些干货，希望这次分享对大家有所启发和帮助。

个人的css历史

说说自己的css学习的历史，12年，当时是老师手把手1对1教我div+float的固定布局，所有元素全部用float，做了学生会网站的全部前端页面，因为有段时间学PS比较多，也是自己做的UI，很丑，老师说第一次做成这样很不错了，那时老师就觉得我有做前端的天赋，我就是从这个时候开始接触前端的。毕业设计自己一个人做了一个全栈的web，做完整个毕业设计后，我就决定出来要做前端，感觉自己更喜欢。14年出来工作，那时候还不会用什么less，就是直接写css，那时候主要还是写固定布局的pc页面，14年底自己在项目里折腾，用了一下JQmobile，超级难用。15年做一个移动端项目的时候，调研了几个css库，学习了bootstrap和它部分源码，还用到了webfont，使用流式布局这一次提升很大再后来学习了rem，并用到了项目中，至此我的css就到了一个缓慢成长期，或者说就没有特意学习css了。

干货

下面来说一些，我平时比较注意的细节、技术点，和一些大家可能不是很熟悉的知识点。

1.box-sizing: border-box

box-sizing主要有两个值content-box和border-box，先看下官方的解释：

通俗一点来说，默认情况下，padding和border是会额外占据空间的，假如元素宽是10px，如果设置了1px border边框，实际的宽就是12px，padding同理。那么这样会导致，布局的宽高不好控制，计算也特别麻烦。所以我们会给全局的元素用上border-box， 只要设置了宽高，那么border和padding无论怎么变化，元素的宽高都不会变，这样方便布局和计算。

2.左边固定 右边自适应

在布局的时候，比如一些列表页，常常左边是一个固定大小的缩略图，右边剩余部分展示标题，如图

那我们就叫左边固定右边自适应的布局吧，我的方法 100%宽的div用padding-left把左边图片的位置留出来，div元素内容的部分就是标题，图片绝对定位到padding-left区域，这样就实现了左固定右自适应，（前提是box-sizing必须是border-box，否则padding加上100%宽会超出屏幕宽度），大致代码如下：

3.伪类的 content attr

伪类before,after的content属性，是用来插入内容的，我们可以通过attr 传入一个当