destiny'Note

前端技术学习与分享

排序:
默认
按更新时间
按访问量

DOM的映射机制

前言 这在我们平常操作 DOM 的时候司空见惯。就比如:我通过获取一个元素来改变其样式,自然而然的反映到 HTML 页面中。 但是,我们操作 JS 对象的时候,本质上操作的是 JS 堆内存,为什么会反映到页面中呢?就是因为浏览器存在这个 DOM 的映射机制。 1. 什么是 DOM 的映射...

2018-08-12 22:52:30

阅读数:2

评论数:0

JS类型转换总结

前言 JS 令人头疼的一点就是它属于弱类型语言,一个变量存储的值可以是字符串、数值、布尔值或者对象等,可以随时变更。获取一个变量,你不会知道其存储的值是什么类型的,所以很多时候都需要进行类型检测。 除了手动变更类型之外,有些情况下,JS 内部也会自动进行类型转换,以满足部分操作符以及语句等的执...

2018-08-06 17:00:37

阅读数:12

评论数:0

JS变量的创建机制

前言 JS 怎么创建变量?相信大家都会: var a; function b(){} 那么它们具体存储在哪里,又是怎么运行的呢? 这次,就聊一聊 JS 的堆栈内存和变量的创建机制。(这里只介绍 ES5 的机制) 1. 堆栈内存 在了解变量创建机制之前,先来了解一下变量的存储空间...

2018-08-06 16:59:47

阅读数:8

评论数:0

Markdown 添加 Latex 数学公式

Markdown 中添加公式 Latex 数学公式语法 角标上下标 分式 根式 求和与积分 上下划线 上下括弧 数学重音符号 堆积符号 定界符 占位宽度 集合相关的运算命令 矩阵 参考 Markdown 中添加公式 行内公式 $行内公式$ 行间公式 $$ 行间公式...

2017-12-09 20:45:57

阅读数:487

评论数:0

ESLint (二)配置文件

一、配置方式 注释形式:使用 JavaScript 注释将配置信息直接嵌入到文件中 文件形式 .eslintrc.js .eslintrc.yaml 或者 .eslintrc.yml .eslintrc.json package.json 文件中创建 eslintConfig 属性 .esli...

2017-11-30 22:52:16

阅读数:1669

评论数:0

ESLint (一)简介与安装

一、关于ESLint 是一个由 Nicholas C. Zakas 于 2013 年 6 月创建的开源 JavaScript linting 实用程序。codelinting 是一种静态分析,常用于查找不符合某些样式指南的有问题的模式或代码。JavaScript是一种动态和松散类型的语言,特别容易...

2017-11-30 22:51:28

阅读数:197

评论数:0

Canvas 画五角星

前言学习 canvas,更多的是需要动手实践,下面就从一个相对简单的例子:五角星开始吧! 不懂 canvas 的同学,请先学习:Canvas 画布 一、几何模型由上图可以清晰的得到大概的思路,大圆和小圆上的点相间相连,就可以的到五角星。 我的做法是从右下角开始画。因为 canvas...

2017-11-30 22:50:29

阅读数:139

评论数:0

Canvas 画时钟

前言不管学习什么,不动手去做,永远不能熟练掌握。学习了 canvas API,会觉得只要按照直线、圆等画法去画,canvas 太简单了。可是,当你真正去画的时候,会遇到许多的问题。下面介绍的是 canvas 时钟,主要是与大家分享我的学习过程。 不懂 canvas 的同学,请先学习:Canva...

2017-11-30 22:49:54

阅读数:402

评论数:0

HTML5 地理位置

一、简介地理位置特性能够识别你所在的地理位置并且在你允许的情况下,把位置信息分享给别人。识别地理位置的方法: - 通过 IP 地址 - 只能用于电脑上的位置信息定位 利用基站获取去收集网络的介入位置大致位置,不够精确 精确到用户所属的城市街区,获取用户房源一公里的范围内 通过卫星定位获得经...

2017-11-30 22:48:47

阅读数:372

评论数:0

HTML5 微数据

一、什么是微数据一个页面的内容,不仅要给用户看,还要让机器可识别。而目前机器智能程度有限,要让其知会特定内容含义,我们需要使用规定的标签、属性名以及特定用法等。如使用 <h1> 标签包裹页面标题信息就是为了让机器识别(搜索引擎 SEO)微数据本质是给网页中可见的数据提供附加语义的标准化...

2017-11-30 22:48:10

阅读数:89

评论数:0

浅谈响应式

前言 由于移动设备的增多,携带便利,人们在移动设备上浏览网页的时间不断增加,甚至要超过PC端。但是PC端的网页放到移动端,就会出现各种问题,如字体太小、图片不清晰等。浏览体验变得很差。于是,就有了响应式网页的诞生。在多种设备的不同尺寸的屏幕上,精巧设计和制作出最佳视觉体验的网页。 下面,就跟...

2017-10-31 09:52:40

阅读数:228

评论数:0

像素与viewport概念

一、像素的概念 px :逻辑像素 ,浏览器使用的抽象单位 dp、pt:物理像素 dpr:设备像素缩放比 ppi:屏幕每英寸的像素数量,即单位英寸内的像素密度 ppi 120 160 240 320 dpr 0.75 1.0 1.5 2.0 ppi 越高,像素数越高,...

2017-10-31 09:52:37

阅读数:85

评论数:0

sass的使用

前言 在介绍之前,请大家先弄清楚下面的问题: 什么是 sass sass 是 css 的预处理器(css preprocessor) 为什么使用 sass 1、 它能够帮我们更快更高效的编写更好维护的 css 。 2、 它自带很多原生 css 没有的功能,如变量(现在 css 中已经实现)、条件...

2017-10-31 09:52:34

阅读数:446

评论数:0

说说CSS学习中的瓶颈

前言 本文是在自己重新开始学习CSS的过程中看到的,与其说它是讲如何深入学习CSS,更多的是警醒的作用,看了文章之后,才真正认清自己的浮躁,也庆幸自己回头恶补。本文不涉及技术,但是希望大家都能看一看。 本文转载自说说CSS学习中的瓶颈 " 张鑫旭-鑫空间-鑫生活**。 0 写在前面 ...

2017-10-31 09:52:31

阅读数:140

评论数:0

CSS实现元素的居中显示

前言 元素的水平及垂直居中是在写CSS样式中最常遇到的问题之一。相信会CSS的同学肯定都有自己的解决方法,但是并不一定都能熟练运用,并且知道其中原理。下面,我就将自己总结的实现方法分享给大家。 ps:重点是第四,疑惑在第三,第一、第二也较常用 为本文制作的demo:元素居中显示 一、单行文本...

2017-10-31 09:52:28

阅读数:146

评论数:0

给不了解前端的同学讲前端

前言 这篇文章,是在前几天逛知乎的时候看到的文章,觉得很棒,正好也有这个需求,想向不了解前端的人介绍何为“前端”。不然,自己所在的群体中好像很少人能明白我一天到晚钻研的东西是什么。下面与大家分享。 ps:本文为PPT演讲的形式所作的图文介绍,图片较多。 本文转自知乎:前端 101:给不了解前端的...

2017-10-31 09:52:25

阅读数:171

评论数:0

关于Flex布局

前言 本文引自阮一峰的网络日志:Flex 布局教程:语法篇 阮一峰老师的文章确实很棒,在他的博客学到了很多的知识,通俗易懂。 讲讲布局,传统的布局,是基于盒子模型,依赖 display + position + float属性。它对于特殊的布局非常不方便,如:垂直居中。 Flex布局是W...

2017-10-31 09:52:22

阅读数:90

评论数:0

层叠上下文和层叠顺序

引自:张鑫旭的博客 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 前言 原文是在前面对transform引起的z-index“失效”探究过程中找到的,非常棒,所以转载分享。本文大多摘自原文,进行了压缩,也加入了我自己的理解,希望对大家有帮助。 ...

2017-10-31 09:52:20

阅读数:191

评论数:0

Transform 引起的 z-index &quot;失效&quot;

前言 重新学习CSS后的第三天,学习制作阴影的过程中,发现的问题: 设置了box-shadow后展现的阴影: 添加transform:rotate(10deg);后的效果: 查看CodePen例子:阴影效果 一脸懵逼!再修改z-index完全没有效果。 百度之后,找到了问题的答案,...

2017-10-31 09:52:17

阅读数:152

评论数:0

关于inline-block问题

前言 在重新学习css,做自己的学习demo时,设置一堆div在一行显示,呈现对比。 结果如图,设置了display:inline-block之后,出现了部分下沉现象。 改为float之后,又恢复正常对齐。 不过,很快就得到了解决。于是,就写了这篇关于inline-block问题的文章,包...

2017-10-31 09:52:11

阅读数:111

评论数:0

提示
确定要删除当前文章?
取消 删除
关闭
关闭