second
####复习
在使用了box-sizing之后 加padding比较 多 加margin可能会造成内容的溢出
设置margin的大小时不算进和自宽度的 padding是由算进去的 所以使用 padding
移动端搜索
移动端获取页面的滚动距离使用
var scrollTop = document.body.scrollTop;
没有其他的兼容性
引入js文件使用
思考如何解决 offsetHeight无法获取问题
移动端触摸事件
解释touch:
1. touch是移动端的触摸事件 而且是一组事件
2. touchstart 当手指触摸屏幕的时候触发
3. touchmove 当手指在屏幕来回的滑动时候触发
4. touchend 当手指离开屏幕的时候触发
5. touchcancel 当被迫终止滑动的时候触发（来电，弹消息）
6. 利用touch相关事件实现移动端常见滑动效果和移动端常见的手势事件
- 绑定事件：
使用 box.addEventListener(‘touchstart’, function (){
})
事件对象
名字 touchlist 触摸点(一个手指触摸就是一个触摸点，两个手指就有两个，也就是和屏幕的接触点个数)的集合
changedTouches 改变后的触摸点集合
targetTouches 当前触摸点集合
touches 页面上所有触摸点的集合
触摸点集合在每个事件触发的时候会不会记录触发
changesTouches 每个事件都会记录
targetTouches touches 在离开屏幕的时候不会记录触摸点
分析滑动实现的原理
就是让触摸的元素随着手指的滑动位置的改变
位置的改变
需要当前手指的坐标
在每个触摸点中会记录当前触摸点的坐标 e.touches[0] 第一个触摸点
clientX clientY 基于浏览器窗口（视口）
pageX pageY 基于页面（视口）
screenX screenY 基于屏幕
使用任何一种都可以
轮播图需求分析
/*1. 自动轮播图且无缝 定时器，过渡*/
/*2. 点要随着图片的轮播改变 根据索引切换*/
/*3. 滑动效果 利用touch事件完成*/
/*4. 滑动结束的时候 如果滑动的距离不超过屏幕的1/3 吸附回去 过渡*/
/*5. 滑动结束的时候 如果滑动的距离超过屏幕的1/3 切换（上一张，下一张）根据滑动的方向，过渡*/
自动轮播与无缝轮播与优化
轮播图点的设置
伪数组不能直接调用 forEach方法
伪数组就是指 比如获取dom元素多个li的集合 就是伪数组
滑动效果
解决一个bug 当点一下 不滑动 轮播图不转
解决了 在重启定时器 的代码需要放在判断之外
移动端滑动的手势
手势事件 swipe swipeLeft swipeRight swipeUp swipeDown
/*1. 理解移动端的手势事件*/
/*2. swipe swipeLeft swipeRight swipeUp swipeDown */
tap（轻触）事件
轻击 轻触 响应速度块
移动的click事件 反应慢 为了区分滑动和点击 会延迟300ms
使用tab事件 解决click事件反应慢
是通过touch原生事件衍生过来的 了解其原理
在一定时间内没有滑动 就是点击
if ((Date.now() - startTime) < 150 && !isMove) {
callback && callback.call(this, e);
}
使用fastclick插件 解决响应慢
4.2 使用一个叫：fastclick.js 提供移动端click响应速度的
4.2.1 下载：https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js
引入上面的文件后 就可以正常的使用click了
倒计时
有浮动 需要给父元素清除浮动 不然会出现闪动 意想不到的事情
顶部通栏
裁剪背景
/*让背景图片从内容区域开始平铺*/
background-origin: content-box;
/*没有做背景裁剪 背景图默认就是从边框显示*/
/*默认的就是
border-box 边框以外被裁剪掉
padding-box 内边距以外被裁剪掉
content-box 内容以外被裁剪掉
*/
background-clip: content-box;
因为这个案例的下拉可以无限的长 所以需要高度也是100%
两栏自适应
左栏浮动 右栏超出的部分 overflow： hidden
overflow： hidden在这里的作用
/*让这个元素绝对绝缘 bfc*/
/*不让其他浮动元素影响自己*/
/*不让自己的浮动去影响别的元素*/
在案例两栏自适应里面有
iscroll的使用
文件里有具体使用文档
浮动的时候记住 调换一个div的位置
第一个div占满位置 第二个div就会在第一个div后面排列下去
两栏自适应 浮动元素优先写在前面
text-right文本向右对齐
text-left文本向左对齐
less使用安装
安装
npm install -g less
lessc -v 查看版本
学习网址
1.1.2学习less
[官网](http://lesscss.org/)
[中文网](http://lesscss.cn/) http://www.1024i.com/demo/less/
Webstrom 插件
Lessc less.less less.css 编译less文件成css