1. 响应式开发 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 设备划分 尺寸区间 超小屏幕（手机） < 768px 小屏设备（平板） >= 768px ~ < 992px 中等屏幕（桌面显示器） >= 992px ~ <1200px 宽屏设备（大桌面显示器）…

1. 动画（animation） 动画（animation） 是CSS3中具有颠覆性的特征之一，可通过设置多个节点精确控制一个或一组动画，常用来实现复杂的动画效果。 相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。 1.1 动画的基本使用 制作动画分为两步： 先定义动画 再使用（调用）动画 首先使用keyframes 定义动画（类似…

1. 什么是转换 转换（transform）是CSS3中最具颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。 转换可以简单理解为变形： 移动：translate 旋转：rotate 缩放：scale 2. 二维坐标系 2D转换时改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标： 往右走是正值，向下走是正值。 3. 2D转换之移动…

1. CSS3之过渡属性（transition） 过渡（transition）是CSS3中具有颠覆性的特征之一，我们可以在不使用Flash动画或javascript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。 过渡动画：是从一个状态渐渐的过渡到另外一个状态。可以让我们的页面更好看，更动感十足，虽然低版本浏览器不支持但是不会影响页面布…

1. HTML5的新特性 HTML5的新增特性主要针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容问题，基本是IE9+以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。 1.1 HTML5新增的语义化标签 header：头部标签 nav：导航标签 article：内容标签 section：定义…

1. 精灵图 1.1 为什么需要精灵图 一个网页中往往会应用很多很小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。 因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度 ，出现了CSS精灵技术（也称为CSS Sprites，CSS雪碧）。 1.2 精灵…

1. 为什么需要定位 一些固定盒子的效果，标准流或浮动都无法快速实现，此时需要定位来实现。所以： 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。 2. 定位组成 定位:将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。…