盒模型
浏览器在对文档进行布局时，把所有元素看成一个矩形的盒子，包括margin、border、padding和content
盒模型分为ie盒模型和W3C标准盒模型
一般标准盒模型的width、height只包含content
ie盒模型的width、height还包括border、padding(ie8+中默认是标准盒模型)
在W3C标准中，盒模型可以通过box-sizing来切换(border-box，content-box)
rem
rem相对长度 相对于根元素的font-size的值(100*屏幕宽度/设计稿宽度)
em相对长度 相对于父元素
px绝对长度
移动端布局方案
- 响应式布局，利用媒体查询@media，为不同分辨率的设备加载不同的样式
优点是可以精准的控制显示效果，但需要对同一个类编写不同的样式，后期维护比较麻烦
- rem布局
- 流式布局，通过设置百分比，高度大都用px固定住
优点是能解决自适应需求。
缺点是，大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样
- 固定布局，固定宽度，超出部分留白
less和scss的区别
- less是基于JavaScript的，在客户端处理；scss是基于Ruby的，是在服务端处理
- 都支持嵌套的写法
- 都实现了变量、混入、运算、函数等功能
- 语法的区别，比如定义变量less@，scss用$符号
