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. 定位组成 定位:将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。…

1.浮动 1.1 传统网页布局的三种方式 网页布局的本质：用CSS来摆放盒子，把盒子摆放到相应位置。CSS提供了三种传统布局方式： 普通流（标准流） 浮动 定位 1.2 标准流（普通流/文档流） 标准流：就是标签按照规定好默认方式排列。 块级元素会独占一行，从上到下顺序排列（一行只能放置一个）。如：div, hr, h1-h6, ol, dl, f…

1. 盒子模型 页面布局要学习三大核心：盒子模型，浮动和定位。学习好盒子模型能非常好的帮助我们页面布局。 1.1 看透网页布局的本质 网页布局过程： 先准备好相关的网页元素，网页元素基本都是盒子Box。 利用CSS设置好盒子样式，然后摆放到相应位置。 往盒子里面装内容。 本质：利用CSS摆放盒子。 1.2 盒子模型的组成 CSS盒子模型本质上是一个…

CSS有三个非常重要的特性：层叠性，继承性和优先级。 1. 层叠性 相同选择器给设置相同的样式，此时一个样式就会覆盖 另一个冲突的样式。层叠性主要解决样式冲突的问题。 层叠性原则： 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式。 样式不冲突就不会重叠。 例如，给div 同时设置两个相同的样式产生样式冲突： div { color…