CSS基础和LESS入门
看《CSS权威指南》的时候简单的整理了一些笔记，有些东西比之前有了更深的理解，但是用这么厚的一本书来学CSS多少有些头大，只需要把一些关键的东西理解透彻，具体的设置查手册更快！
布局和定位
原生的HTML中元素分为两种：块级元素和行内元素，而CSS中用display来影响元素的展示：
| 值 | 含义 |
|---|---|
| none | 隐藏对象并且不会保留物理空间 |
| inline | 行内元素 |
| block | 块级元素 |
| inline-block | 行内块元素，也就是说横着排列的同时可以指定宽高 |
| box | 弹性盒子模型 |
| inline-box | 行内弹性盒子，和inline-block有点类似 |
直接使用top、right等是不会起作用的，想要起作用得用position来配合：
| 值 | 含义 |
|---|---|
| static | 不使用定位 |
| relative | 相对于父节点的位置 |
| absolute | 绝对定位，会跟滚动条滚动 |
| fixed | 固定定位，不会跟随滚动 |
当用relative有问题的时候可能是你的HTML结构错了导致父节点判断错误导致的:)用display+position可以把一个元素放到你想要的位置，但是一个块也不是简单的长方形，也有其结构：
| 属性 | 含义 |
|---|---|
| margin | 外补白 |
| padding | 内补白 |
| border | 边框 |
外补白比较特殊一点：取的双方的是max而不是sum，在chrome控制台玩一下就能很好地理解这三个的用法：
直观上背景图片是用来做背景的，但是感觉现在都被大家玩坏了，比如经常把很多的图标放到一个图片上然后用
.x {
background-image:url(img-url);
background-position:-100px 100px;
}
就可以在对应的DIV中展示出局部图片，这个局部就可能是某个ICON，感觉这完全是在当图片使用额~ 当内容超过限制的时候可以使用
- overflow
- overflow-x
- overflow-y
来进行控制，但是滚动条的默认样式实在是太丑了，在这里找到一种修改的方法，对于-webkit-核的浏览器来说很简单，但是要去兼容IE+FX比较麻烦，可以考虑用jQuery插件。
变换和动画
LESS
虽然它的口号是LESS IS MORE, THAN CSS，但是确实感觉LESS是在CSS的基础上增加了一些扩展
- 变量
- 继承
- 嵌套
- 运算
- 函数
另外LESS实际兼容CSS的（也就是说你可以在里面直接写CSS代码），实际使用时可以在后端将其打包（比如Grunt）成CSS文件之后再提供给前端，具体用法可以看这里的中文文档。