04 2020 档案
摘要：方式一；原型链继承 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>01_原型链继承</title> 6 </head> 7 <body> 8 <!-- 9 方式1: 原型链继承 10 1
阅读全文
摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>02_内存溢出与内存泄露</title> 6 </head> 7 <body> 8 9 <!-- 10 1. 内存溢出 11 * 一种程序运
阅读全文
摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>01_理解闭包</title> 6 </head> 7 <body> 8 <!-- 9 1. 如何产生闭包? 10 * 当一个嵌套的内部(子
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02_作用域与执行上下文</title> </head> <body> <!-- 1. 区别1 * 全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定
阅读全文
摘要：一.执行上下文 1. 代码分类(位置) * 全局代码 * 函数(局部)代码 2. 全局执行上下文 * 在执行全局代码前将window确定为全局执行上下文 * 对全局数据进行预处理 * var定义的全局变量==>undefined, 添加为window的属性 * function声明的全局函数==>赋
阅读全文
摘要：JavaScript数组的栈和队列的操作方法。 堆栈和队列 要了解JavaScript数组的堆栈和队列方法的操作，需要先对堆栈和队列基础知识有所了解。在继续后面的内容之前，我们先简单的了解一下堆栈和队列的概念。 栈和队列都是动态的集合，在栈中，可以去掉的元素是最近插入的那一个。栈实现了后进先出。在队
阅读全文
摘要：1 //1) 2 console.log(a); 3 var a=10 4 // 以上发生域解析,将var a申明提前,相当于如下 5 var a; 6 console.log(a); 7 a=10; 8 9 //2) 10 console.log(fun); 11 function fun(){
阅读全文
摘要：1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 10 //当函数内部出现变量不带
阅读全文
摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>01_原型(prototype)</title> 6 </head> 7 <body> 8 <!-- 9 1. 函数的prototype属性
阅读全文
摘要：数据类型 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>01_数据类型</title> 6 </head> 7 <body> 8 <!-- 9 1. 分类 10 * 基本(值)类型 11
阅读全文
摘要：1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 /* 8 * Math 9 * - Math和其他的对象不同，它不是一
阅读全文
摘要：1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 8 /* 9 * Date对象 10 * - 在JS中使用Date对象
阅读全文
摘要：1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 /* 8 * 在调用函数时，浏览器每次都会传递进两个隐含的参数： 9
阅读全文
摘要：1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <script type="text/javascript"> 8 function fun(a,b) { 9 console.log
阅读全文
摘要：数组 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 8 /* 9 * 内建对象 10 * 宿主对象 11 * 自定义
阅读全文
摘要：1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 8 //创建一个数组 9 var arr = [1,2,3,2,2,1
阅读全文
摘要：使用for ... in 语句，枚举对象中的属性 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 8 var obj
阅读全文
摘要：对象 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 /* 8 * JS中数据类型 9 * - String 字符串
阅读全文
摘要：代码块 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * 我们的程序是由一条一条语句构成的 * 语句是按照自上向下的顺序一条一条执行的 *
阅读全文
摘要：1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 9 10 11 <script type="text/javascript"> 12 /* 13 j
阅读全文
摘要：1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 8 /* 9 * 基本数据类型 10 * String Number
阅读全文
摘要：方法一，利用flex 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 12 .outer{
阅读全文
摘要：一，下拉框靠近子元素 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 13 .a{
阅读全文
摘要：1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 7 <style> 8 9 .a{ 10 height: 100px; 11 width: 250px; 12 background-co
阅读全文
摘要：一，高度塌陷 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
阅读全文
摘要：HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是，这三者是可以互相转换的，使用display属性能够将三者任意转换： (1)display:inline;转换为行内元素 (2)display:block;转换为块状元素 (3)display:inline-bloc
阅读全文
摘要：众所周知，less是一门css预处理语言，其他的类似还有scss、Stylus 等，和js相似度比较高的就是less了。话不多说，我们来看less的使用。 Node.js 环境中使用 Less ： npm install -g less > lessc styles.less styles.css
阅读全文
摘要：一，用flex的副轴来垂直居中对齐 1.副轴（由上到下）设置居中对齐（align-items: center;）即可 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</t
阅读全文
摘要：一、简要介绍# flex（ flexible box：弹性布局盒模型）,是2009年w3c提出的一种可以简洁、快速弹性布局的属性。 主要思想是给予容器控制内部元素高度和宽度的能力。目前已得到以下浏览器支持： 其中在webkit内核的浏览器中使用时，必须加上-webkit-前缀 采用Flex布局的元素
阅读全文
摘要：1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>像素</title> 6 <style> 7 8 .box1{ 9 width: 200px; 10 height: 200px; 11 background-
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="viewport" content="width=device
阅读全文
摘要：flex-grow、flex-shrink、flex-basis三个属性的作用： 在flex布局中，父元素在不同宽度下，子元素是如何分配父元素空间的。 (注意：这三个属性都是在子元素上设置的，下面小编要讲的是父元素，指以flex布局的元素(display:flex)) 小编这里先教一下大家如何快速记
阅读全文
摘要：1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 8 .box1{ 9 width: 800px; 10 height: 500px; 11 border: 4px r
阅读全文
摘要：1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 list-style: none; 11 } 12
阅读全文
摘要：1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 8 html{ 9 perspective: 800px; 10 } 11 12 @keyframes round{
阅读全文
摘要：1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>表</title> 6 <style> 7 8 9 /* 设置关键帧 */ 10 @keyframes clock{ 11 from{ 12 transform
阅读全文
摘要：码云非活跃帐号处理规范 https://gitee.com/login 《码云非活跃帐号处理规范》 码云帐号的个人空间地址即 URL 标识（下面简称标识，如 https://gitee.com/xxxx 中的 xxxx) 在整个系统内是唯一的，以先到先得的方式提供给用户使用，对以下两种情况，码云保留
阅读全文
摘要：1. 在现实生活中，我们经常需要使用表格来表示一些格式化数据： 课程表、人名单、成绩单.... 同样在网页中我们也需要使用表格，我们通过table标签来创建一个表格2.<table border="1" width='50%' align="center"> <!-- 在table中使用tr表示表格
阅读全文
摘要：1.background-image 设置背景图片 - 可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色 - 如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满 - 如果背景的图片大于元素，将会一个部分背景无法完全显示 - 如果背景图片和元素一样大，则会直接正常显示 2.
阅读全文
摘要：1.代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 12 div{ 13 /* wi
阅读全文
摘要：1.transform 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>变形</title> 6 <style> 7 8 .box1{ 9 width: 200px; 10 height: 200px; 11
阅读全文
摘要：1.transition 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 .box1{ 8 position: absolute; 9 width: 200px; 1
阅读全文
摘要：1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>变形</title> 6 <style> 7 8 .box1{ 9 width: 200px; 10 height: 200px; 11 margin-top:
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* 像这种，利用雪碧图制作的动画效果叫做精灵动画 */ .box1{ height: 271px; width: 132px; backgrou
阅读全文
摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 7 <style> 8 9 body{ 10 position: relative; 11 heigh
阅读全文
摘要：作用 图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载， 雪碧图的使用步骤： 1.先确定要使用的图标 2.测量图标的大小 3.根据测量结果创建一个元素 4.将雪碧图设置为元素的背景图片 5.设置一个偏移量以显示正确的图片 雪碧图的特点： 一次性将多个图片加载进页面，降低请求的次数，加快
阅读全文
摘要：1. 基线、底线、顶线 行高指的是文本行的基线间的距离。 基线并不是汉字的下端沿，而是英文字母"x"的下端沿 2. 行距、行高 3. 内容区 底线和顶线包裹的区域，实际中不一定看得到，但却是存在。 4. 行内框 行内框只是一个概念，它无法显示出来，但是它又确实存在 它的高度就是行高 在没有其他因素（
阅读全文
摘要：1.如果父元素class="j", 套着子元素class="k",且向左浮动了，子元素class="k"也套着同名后代元素，如果在css写class类选择器胡乱写，会造成结构问题， 2.比如css写 .j li{ float: left;}, 手机电话卡，向左浮动了，那么此时带来一个问题，.j .m
阅读全文
摘要：1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 8 .box1{ 9 width: 0px; 10 height: 0px; 11 border: 15px red
阅读全文
摘要：网页的窗口的结构： 最外层 浏览器窗口（视口） 初始包含块 HTML根元素 body ………… 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 8 /* 9 网页的窗
阅读全文
摘要：使用 title 属性，可以让鼠标悬停在超链接上的时候，显示该超链接的文字注释。 <a href="http://www.opendir.cn" title = "中文开放目录">分类目录</a> 如果希望注释多行显示，可以使用 作为换行符。 <a href="http://www.open
阅读全文
摘要：/* v2.0 | 20110126 http://meyerweb.com/eric/tools/css/reset/ License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h
阅读全文
摘要：CSS3提供了5种圆角属性 border-radius ：同时设置4个边框的圆角样式。 border-top-left-radius ：设置左上角边框的圆角样式。 border-top-right-radius ：设置右上角边框的圆角样式。 border-bottom-left-radius ：设置
阅读全文
摘要：基础说明： 外阴影：box-shadow: X轴 Y轴 Rpx color; 属性说明（顺序依次对应）： 阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值（大小） 阴影的颜色 内阴影：box-shadow: X轴 Y轴 Rpx color inset; 默认是外阴影 内阴影：ins
阅读全文
摘要：前言 1.盒模型、盒子模型、框模型（box model） - CSS将页面中的所有元素都设置为了一个矩形的盒子 - 将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置 - 每一个盒子都由一下几个部分组成： 内容区（content） 内边距（padding） 边框（border）
阅读全文
摘要：前言 CSS的伪类和伪元素在平时的代码中经常会出现，可是一旦别人问你，什么是伪类，什么是伪元素，可能还是不能完整的表述出来，下面我们来一探究竟。 伪类和伪元素定义 伪类用于在页面中的元素处于某个状态时，为其添加指定的样式。 伪元素会创建一个抽象的伪元素，这个元素不是DOM中的真实元素，但是会存在于最
阅读全文
摘要：1.说明 此色彩模式与RGB相同，只是在RGB模式上新增了Alpha透明度。 RGBA(R,G,B,A) 2.取值 R： 红色值，正整数值的取值范围为：0 - 255，百分数值的取值范围为：0.0% - 100.0%。 G： 绿色值，正整数值的取值范围为：0 - 255，百分数值的取值范围为：0.0
阅读全文
摘要：浮动 性质1：浮动的元素脱标 脱标即脱离标准流。我们来看几个例子。 证明1： 上图中，在默认情况下，两个div标签是上下进行排列的。现在由于float属性让上图中的第一个<div>标签出现了浮动，于是这个标签在另外一个层面上进行排列。而第二个<div>还在自己的层面上遵从标准流进行排列。 证明2：
阅读全文
摘要：CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。 position: absolute; <!-- 绝对定位 --> position: relative; <!-- 相对定位 --> position: fixed; <!-- 固定定位 --> 下面逐一介绍。 相对定位 相对定位：让元
阅读全文
摘要：vertical-align属性主要用于改变行内元素的对齐方式，对于行内布局影响很大，如果不了解的话，我们开发调整样式的时候很容易出错。 网上关于这个属性的原理说得很是复杂，看一眼就让人觉得望而生畏，而且大可不必完全理解其原理，只要懂得其规律，我们足够使用即可，下面把我的理解分享给大家： 基线 要了
阅读全文
摘要：一、空间占据 display: none; 是彻底消失，不在文档流中占位，浏览器也不会解析该元素 visibility:hidden; 是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素； 使用visibility:hidden比display:none性能上要好，dis
阅读全文
摘要：在开发过程中，很多需求需要我们居中一个div，比如html文档流当中的一块div，比如弹出层内容部分这种脱离了文档流等。不同的情况有不同的居中方式，接下来就分享下一下几种常用的居中方式。 1.text-align:center方式 代码： 1 2 3 4 5 <div class="center">
阅读全文
摘要：首先要将博客园的编辑器设置为markdown编辑器，步骤；选项-默认编辑器-markdown。 打开要转载的文章，右键点击查看，找到整个文章的div,右键选择copy——copy outerHTML 插入图片 3.然后在进入自己的博客园，新建一个文章，之后再内容除ctrl+v就可以了 4.直接发布后
阅读全文
摘要：对于喜欢逛博客的人来说，看别人的博客确实能够对自己有不小的提高，有时候看到特别好的博客想转载下载，但是不能一个字一个字的敲了，这时候我们就想快速转载别人的博客，把别人的博客移到自己的空间里面，当然有人会说我们可以收藏博客啊，就不需要转载，(⊙o⊙)… 也对。。 实现 因为我自己当初想转载的时候却不知
阅读全文