- 博客(27)
- 收藏
- 关注
RSS订阅转载 javascript能冒泡的事件
每个 event 都有一个event.bubbles属性，可以知道它可否冒泡。(ref：W3定义的Event Interface)当然 W3 DOM Level 3 Events 的细则里已经附上这个表格了：Event Type Bubbling phase abort ✗ beforeinput ✔ blur ✗ click ✔ comp...
2018-10-25 17:20:35
610
2
转载 浅谈JavaScript模拟$(HTML字符串)实现创建DOM对象
JavaScript里动态创建标准DOM对象一般使用：document.createElement()方法。但在实际使用过程中，可能会希望直接根据HTML字符串创建DOM节点，模拟$(HTML字符串)创建DOM对象的方法。1、思路：① 用document.createElement()方法创建一个div元素；② 用innerHTML来给div元素插入HTML字符串；③ 用div...
2018-10-25 17:18:51
712
转载 让高度百分比，height:100% 生效的3种方法
核心原理；height:100%这个概念是子节点相对于父容器而言；所以要让此属性生效，必要的一点就是：父容器必须具有具体的高度信息；直接在<body>的子节点（如div中）写height:100%是不会生效的，因为此时<body>的高度是不确定的，默认是auto；方法一给从根的父容器到子容器的所有容器都设置好百分比高度信息比如：<!DOCTYPE...
2018-10-25 17:15:20
2900
转载 Sass、LESS 和 Stylus区别总结
CSS 预处理器技术已经非常的成熟了，而且也涌现出了越来越多的 CSS 的预处理器框架。本文便总结下 Sass、Less CSS、Stylus这三个预处理器的区别和各自的基本语法。1.什么是 CSS 预处理器CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让C...
2018-10-22 17:06:55
170
转载 LESS使用方法简介（装逼神器）
LESS 做为 CSS 的一种形式的扩展，它并没有阉割 CSS 的功能，而是在现有的 CSS 语法上，添加了很多额外的功能，所以学习 LESS 是一件轻而易举的事情，果断学习之！变量很容易理解:@nice-blue: #5B83AD;@light-blue: @nice-blue + #111;#header { color: @light-blue; }输出:#h...
2018-10-22 17:02:25
276
转载 less学习（六）— 关于带参数的Mixin
Mixins can also take arguments, which are variables pass to the block of selectors when it is mixed in.（当使用混合时，可以通过选择器块带变量参数。）.border-radius(@radius) { -webkit-border-radius: @radius; -moz-bo...
2018-10-22 17:01:20
283
转载 less,sass,stylus三种预处理器px2rem
CSS单位rem在W3C规范中是这样描述rem的:font size of the root element.移动端越来越多人使用rem，推荐淘宝开源框架lib-flexible今天来介绍一下使用 预处理器转换px单位到rem首先是sass的//定义一个变量和一个mixin$baseFontSize: 16;//默认基准font-size@mixin px2re...
2018-10-22 16:59:53
4091
转载 VS Code：Easy less 路径配置修改
在web开发当中，我经常会用写less然后编译成css，当然在VS Code当中也有这样的插件（EasyLess）；但是当我们创建一个.less文件，写相关代码进行保存时，会发现它会在.less文件同目录生成对应名字的.css文件；当页面过多时，就会到这目录文件过多而且看起来不清晰，所以我一般会把.less和.css分别放在不同目录；类似于这样：这样就需要我们配置一下less文件编...
2018-10-22 16:58:34
6479
转载 如何在vscode里将px转rem，而且还得爽！
自从新版移动端IM界面改用rem适配，效果实在太棒了。所以，接下来的主要工作会将一些核心页面，也从px向rem转移。然，一直用惯了VSCODE，再加上设计稿等诸多原因，如果真想一下子从rem上编码着实还是很困难。因此，一般而言，都是先订一个基准大小，最后根据这个大小进行转换。可是，搜遍了整个VSCODE市场，实在找不到一个能够满足我风格的方案，至少得这样：输入 12px > Ta...
2018-10-22 16:56:30
7789
1
原创 Vscode使用
1.Vscode下快速开始编写html的方法首先在第一行输入！ ，然后将光标移动到！后，按下tab键，完成2.Vscode 编辑html模板内容在安装目录中查找文件Microsoft VS Code\\resources\\app\\extensions\\html\\snippets\\html.snippets.json 修改或者Vscode编辑器->文件--->...
2018-10-19 15:07:58
261
转载 使用Fiddler抓包工具更改请求的url\请求参数
一、更改请求的url1、打开fiddler2、访问需要更改url的页面，这时在fiddler左侧面板可以查看到对应的url3、在fiddler左侧选中访问步骤2页面时，fiddler抓取到的记录。选中该记录-右键-copy-justUrl。得到访问的页面的url：例如：http://192.168.201.133/xxxx/~xxxxxxxx/~/usr/mod_commonsea...
2018-10-18 18:08:31
924
转载 【Fiddler】改写返回数据功能
方法一：打断点1、在手机上设置好代理后，随便进入一个APP；之后选择Rules->Automatic Breakpoints->After Responses，在返回值处打断点2、重新刷新请求页面，选择需要修改的返回值进行修改；之后点击“Run to Completion”3、再次刷新APP页面，修改的返回值就显示在了页面上 方法二：反向代理-AutoRes...
2018-10-18 18:07:24
364
转载 通过windows自带的命令查看笔记本电脑的电池状态
这两天笔记本电脑的电池不知道出了什么状况，每到30%就自动关机，关机后不插电源就无法正常开机，遂想看一看电池的状态，苦于电脑中没有安装各种助手软件（国产的助手软件各种流氓····），于是查询了一下，windows底下自带一个powercfg命令能够查看电池的基本信息，详细流程如下：step 1、win+x键，选择“命令提示符（管理员）”step 2、在命令提示行中输入“powercfg /...
2018-10-18 18:05:36
3142
转载 爬虫笔记之JS检测浏览器开发者工具是否打开
在某些情况下我们需要检测当前用户是否打开了浏览器开发者工具，比如前端爬虫检测，如果检测到用户打开了控制台就认为是潜在的爬虫用户，再通过其它策略对其进行处理。本篇文章主要讲述几种前端JS检测开发者工具是否打开的方法。 一、重写toString()对于一些浏览器，比如Chrome、FireFox，如果控制台输出的是对象，则保留对象的引用，每次打开开发者工具的时候都会重新调用一下对象...
2018-10-18 18:03:16
500
转载 vue-router 在微信浏览器中操作history URl未改变的解决方案
问题描述：在PC端和手机浏览器中router.replace() or router.push()能够正常使用，页面的地址和页面都正常显示；但是在微信中，从/a页面通过router.push('/b')跳转到/b页面后，页面正常，但是复制浏览器的地址会发现其地址仍为/a;选择在浏览器打开发现也是显示的/a的页面。这应该是微信浏览器那边的问题，微信浏览器只会记住你第一次进来的地址。 微...
2018-10-18 18:00:55
1199
转载 -webkit-overflow-scolling使用心得
我们都知道在ios的safari浏览器和app内核浏览器中，当一个h5页面内容超出屏幕高度，我们手指去滑动屏幕的时候，只要手势一离开屏幕，滚动立刻结束。这时候我们可以通过设置-webkit-overflow-scrolling=touch来使页面可以顺畅滚动，但是设置这个也会引出许多问题。 1、单独对body设置-webkit-overflow-scrolling touch是无...
2018-10-18 17:59:05
374
转载 深入研究-webkit-overflow-scrolling:touch及ios滚动
1. -webkit-overflow-scrolling:touch是什么？MDN上是这样定义的：-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和...
2018-10-18 17:57:14
567
转载 CSS3 transform对普通元素的N多渲染影响
一、一入transform深似海一个普普通通的元素，如果应用了CSS3 transform变换，即便这个transform属性值不会改变其任何表面的变化（如scale(1), translate(0,0)），但是，实际上，对这些元素还是造成了写深远的影响。所谓表面无恙，内心奔溃的真实写照。以下就是自己列举的几个比较有代表性的表现示例，欢迎补充！二、transform提升元素的垂直地...
2018-10-17 09:18:37
264
转载 深入理解CSS中的层叠上下文和层叠顺序
零、世间的道理都是想通的在这个世界上，凡事都有个先后顺序，凡物都有个论资排辈。比方说食堂排队打饭，对吧，讲求先到先得，总不可能一拥而上。再比如说话语权，老婆的话永远是对的，领导的话永远是对的。在CSS届，也是如此。只是，一般情况下，大家歌舞升平，看不出什么差异，即所谓的众生平等。但是，当发生冲突发生纠葛的时候，显然，是不可能做到完全等同的，先后顺序，身份差异就显现出来了。例如，杰克和罗斯，...
2018-10-17 09:17:01
230
转载 iOS---z-index失效导致的原因
iOS的弹性滑动属性-webkit-overflow-scrolling: touch会导致z-index属性失效转载于：https://my.oschina.net/yjjjjjj/blog/993805
2018-10-17 09:15:12
8566
转载 解决vue-cli build打包后CSS浏览器兼容前缀自动去除的问题
今天做练手项目部署的时候碰到了个奇怪问题，开发环境里显示得好好的CSS prefixer样式，到production环境就消失了。我开发环境用的是 scss ，刚开始我还以为是 scss 处理器的问题，后来研究了下 build 脚本，发现人家把CSS统一用一个插件给压缩了，然后追查之下发现这个插件用了 postCSS 的 autoprefixer 插件。这下问题就清楚了，因为 autopref...
2018-10-17 09:13:04
1922
转载 解决ios软键盘弹起遮盖住底部输入框的问题（终极解决方案！！！绝对好用）
html<div class="layout_flex"> <!-- 头部 --> <div class="header">header</div> <!-- 中间内容区域 --> <div class="content" id=
2018-10-17 09:11:44
6232
1
转载 布局神器display:flex
2009年，W3C提出了一种新的方案--Flex布局，可以简便、完整、响应式地实现各种页面布局。目前已得到所有现在浏览器的支持。 flex浏览器支持一、Flex布局是什么？Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{ display: -webkit-fl...
2018-10-17 09:09:29
249
转载 display:box布局的详细介绍（图解）
使用display:-webkit-box布局很久了，但是每次使用的时候都是现用现查，而且发现网上没有找到一篇非常全面的关于此布局的介绍，今天决定写一篇博客来记录这个自适应布局。1、首先不同的浏览器要做不同的兼容：目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz)、opera(-0)、chrome/...
2018-10-17 09:08:06
440
转载 css3中的display：-webkit-box的用法
css3中的display：-webkit-box的用法webkit-box1.之前要实现横列的web布局，通常就是float或者display:inline-block;但是都不能做到真正的流体布局。至少width要自己去算百分比。2.flexiblebox就可以实现真正意义上的流体布局。只要给出相应属性，浏览器会帮我们做额外的计算。3.box-flex是css3新添加的盒子模型...
2018-10-17 09:06:50
7250
转载 原生js window.scrollTo平滑滚动到页面的某个位置
window.scrollTo()语法1: window.scrollTo(x-coord,y-coord)x-coord 是文档中的横轴坐标。 y-coord 是文档中的纵轴坐标。例子： window.scrollTo(0,1000); // 垂直滚动到1000的位置语法2： window.scrollTo(options)top 等同于 y-coord ...
2018-10-17 09:05:06
30345
转载 PostCSS自学笔记（二）【番外篇一】
利用PostCSS解决移动端REM适配问题上一期有提到结合postcss-px2rem插件来处理移动端适配的方案，以及相关的避坑方法，之后总觉得这个解决方案问题太多，也就诞生了另一套方案运用postcss-pxtorem插件来进行处理。那么这期番外篇讲的就是postcss-px2rem和postcss-pxtorem的利弊了。题外话，其实我也很好奇，为什么postcss-px2rem没...
2018-10-17 09:01:53
806
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人