上传图片，多图上传，预览功能，js原生无依赖
摘要：最近很好奇前端的文件上传功能，因为公司要求做一个支持图片预览的图片上传插件，所以自己搜了很多相关的插件，虽然功能很多，但有些地方不能根据公司的想法去修改，而且需要依赖jQuery或Bootstrap库，所以我就想学下图片上传的原理，试着做一个原生无依赖，而且足够灵活的图片上传插件。话不多说，开整。
阅读全文
posted @ 2017-03-06 09:53
随笔分类 - CSS
文字偏上原因总结
摘要：设置line height等于height使文字居中， 在移动端会出现文字偏上的问题，原因可能有以下几个。 1. 文字小于12px，解决办法有两个。 使用transform，把文字放大到比12px大的大小 这种方法在部分机型可能出现兼容问题。 使用table cell布局 这种方法兼容性好，就是得多
阅读全文
posted @ 2017-03-02 10:59
页面返回顶部的方法总结
摘要：当页面过长时，通常会在页面下方有一个返回顶部的button，总结一下，大概三种实现方法，下面说下各方法及优缺点。 方法一 锚点定位 这种方法设置方便，但缺点是会刷新页面（我是在同事的乐视手机上发现的）。 方法二 window.scrollTo(x,y) 这种方法也很方便，并且不会刷新页面，缺点是没有
阅读全文
posted @ 2016-12-29 21:56
移动端，字体实际大小比设置的大，原因总结
摘要：最近做移动端官网，发现字体的实际大小比设置的大，找到原因后，在此总结。 原因一：浏览器最小字体设置 ![此处输入图片的描述][1] 字体虽然设置成5px，但字体的实际大小为16px， 原因是浏览器设置了最小字体 ，这个可以手动设置。 ![此处输入图片的描述][2] 原因二：font boosting
阅读全文
posted @ 2016-12-26 17:58
移动端适配基础总结
摘要：说到移动端适配，首先我们需要先搞清楚一些基础知识，所以本文路线是先了解像素，dpr，视口等基础知识，然后再整理出移动端适配方案。 基础知识 像素 像素其实分为两种，分别是物理像素和CSS像素 1. 物理像素（设备像素） 物理像素，顾名思义，显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，
阅读全文
posted @ 2016-11-23 18:02
外边距塌陷之clearance
摘要：在一个BFC中，垂直方向上相邻的块级盒子产生外边距塌陷，本文要说一个特殊的外边距塌陷情况，即当垂直方向上，两个块级盒子之间有个浮动元素相隔时，这个时候会产生什么样的效果呢？ 效果图： 然后我把中间的div设置一下： 效果如图： 可知：浮动元素不会影响后续块级盒子与前面块级盒子的外边距塌陷。 但当我们
阅读全文
posted @ 2016-10-27 20:18
BFC的形成条件和特性分析
摘要：初学CSS时，我们学到很多有意思的CSS规则，比如外边距塌陷，还有浮动元素的一些特性等，其实这些规则背后都是BFC这个东西在控制，下面我们来看下BFC到底是什么。 什么是BFC BFC（Block formatting contexts），翻译过来就是块级格式化上下文，指的是一种上下文环境，我们暂且
阅读全文
posted @ 2016-10-27 20:16
