左边固定，右边自适应：通常是用在list列表，左边一般是固定大小的图片，右边内容自动扩展。要点就是借助padding属性，为左侧留下足够的空间，然后左侧使用绝对布局。代码布局如下:
但是实现上面布局的前提，还需要设置一个属性，便是box-sizing属性，它主要涉及到了元素对宽度的计算。常用的值就是图中两个，他们最直接的区别便是，在设置元素宽度时是否将padding和margin加入其中。这里使用border-box，选择设置width时将padding和margin计算其中。（默认状态下，元素的width设置10px,padding设置10px,那么计算元素的宽度时是30px，如果使用border-box，那么计算元素宽度时就是10px）
在控制元素的上下间距时，建议规范自己的使用，比如通常是用下一个元素的margin-top属性去控制两个元素的间距，或者用上一个元素的margin-bottom，这些都可以，但请规范使用，不要去混合使用，不方便你后期维护的。
class的命名估计是一个让好多前端开发者头疼的事情，每个人都有自己的命名习惯。一般情况下如果使用完整的释义去给class命名，会造成名字过于冗长，其实适当的时候可以使用一些缩写，比如给button加样式，就可以起名为btn,如果要使用单词连接符的话，推荐使用“-',易于阅读，当然用下划线也可以。
估计好多时候大家都会直接通过class去寻找元素并绑定监听事件。一旦class名称有改动，就会影响到js代码，这时候不如启用一种新方式，定义一批无实际意义的class，没有任何值，是与js通过class类绑定事件关联使用，这样对实际意义上的class有改动时，不会影响到js代码。（解耦合微操作）
对CSS的初步提炼（写的多了然就有这种感觉了），总结出一些公共类，这个可以参考BootStrap的写法，对于许多都是用到的样式是可以提取出来作为公共类方便使用的，同时也简化了CSS代码，代码会更加清晰。