- 博客(15)
- 收藏
- 关注
RSS订阅原创 px、em、rem的区别
在css中单位长度用的最多的是px、em、rem，这三个的区别是：一、px是固定的像素，一旦设置了就无法因为适应页面大小而改变。 二、em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。 三、em是相对于其父元素来设置字体大小的，一般都是以<body>的“font-size”为基准。这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而Rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个
2021-10-16 22:47:13
7888
原创 flex布局
布局的传统解决方案，基于盒模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。flex布局属性 容器属性 1.1flex-direction： 该属性决定主轴的方向 属性值为：row(默认)、row-r...
2021-10-15 21:34:24
728
原创 CSS盒模型
CSS盒子模型仅仅是一个形象的比喻，每一个可见的HTML元素都是一个盒子，一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）以及content（内容）。我们可以发现margin、padding和border都是CSS属性，它们三是用来控制盒子的边距边框，而content就是描述HTML元素的内容，通过width/height属性设置content的宽度和高度。内容盒子(W3C盒子)默认盒子模型 W3C盒子使用box-sizing属性可以改
2021-10-15 14:03:22
182
原创 CSS选择器 & 选择器的优先级
1.选择器类型1.1标签选择器作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性 格式: 标签名称{ 属性:值; } 注意点: 1.标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签 2.标签选择器无论标签藏得多深都能选中 3.只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input....)1.2id选择器作用: 根据指定的id名称找到对应的标签, 然后设置属性 格式:
2021-10-14 22:49:00
364
原创 this指向问题
首先补一下 this 是什么？this 是和执行上下文绑定的，也就是说每个执行上下文中都有一个 this。箭头函数和普通函数的区别如下：普通函数：根据调用我的人（谁调用我，我的this就指向谁）箭头函数：根据所在的环境（我定义在哪个作用域，我的this就指向谁）1.普通函数 --- this指向函数的调用对象var name = '不想打代码';function f() { var name = '但没办法啊'; console.log(this.name.
2021-10-12 23:56:38
85
原创 JS浅拷贝和深拷贝
概念：浅拷贝：只拷贝最外面一层的数据；更深层次的对象，只拷贝引用。 深拷贝：拷贝多层数据；每一层级别的数据都会拷贝。 拷贝引用的时候，是属于传址，而非传值。深拷贝会把对象里所有的数据重新复制到新的内存空间，是最彻底的拷贝。传值和传址的区别传值代码举例：let a = 1;let b = a;// 将 a 赋值给 bb = 2; // 修改 b 的值上方代码中，当我修改 b 的值之后，a 的值并不会发生改变。这个大家都知道。我们继续往下看。传址（一个经典的例
2021-10-07 23:54:31
648
原创 Javascript继承
1.原型链ECMAScript 把原型链定义为 ECMAScript 的主要继承方式。其基本思想就是通过原型继承多个引用类型的属性和方法。重温一下构造函数、原型和实例的关系：每个构造函数都有一个指针（prototype）指向它的原型对象，原型有一个属性（constructor）指回构造函数，而实例有一个内部指针(__proto__)指向原型。如果原型是另一个类型的实例呢？那就意味着这个原型本身有一个内部指针指向另一个原型，相应地另一个原型也有一个指针指向另一个构造函数。这样就在实例和原型之间构造了一条原
2021-10-06 23:50:38
107
原创 JS深入理解对象
1.JavaScript工厂模式 1、什么是工厂模式？ 工厂模式是一种众所周知的设计模式，广泛应用于软件工程领域，用于抽象创建特定对象的过程。工厂模式是一种创建型模式，简单来说，工厂模式就是创建对象的一种方式。 2、工厂模式有什么用？ 作用：创建对象；降低代码冗余度。 应用场景：当你想要批量生产同种类的对象的时候；比如，你想生成一个班级的40个学生，每个学生都有姓名、年龄等特征。这时候你创建一个“工厂”，把信息丢到工厂里，工厂就...
2021-10-03 21:27:45
113
原创 JavaScript对象
JavaScript 中的所有事物都是对象，如:字符串、数值、数组、函数等，每个对象带有属性和方法。 对象的属性：反映该对象某些特定的性质的，如：字符串的长度、图像的长宽或人的身高体重等； 对象的方法：能够在对象上执行的动作。例如，表单的“提交”(Submit)，时间的“获取”(getYear)等； JavaScript 提供多个内建对象，比如 String、Date、Array 等等，使用对象前需要先定义。 1.对象的创建 字面量模式 对象使用"{}"..
2021-09-30 21:47:41
66
原创 JS判断数据类型的5种方法
我们先来了解一下JS中数据类型有哪些基本数据类型（值类型）：String、Number、boolean、null、undefined、symbol（es6新增的）引用数据类型 (引用类型)：object。包含 Function、Array、Date、RegExp、Error等都是属于 Object 类型 。一、typeof通常用来判断基本数据类型，它返回表示数据类型的字符串（返回结果只能包括number,boolean,string,function,undefined，object）； *
2021-09-27 23:19:54
30361
1
原创 JS变量的数据类型
为什么需要数据类型在计算机中，不同的数据所需占用的存储空间不同，为了充分利用存储空间，于是定义了不同的数据类型。而且，不同的数据类型，寓意也不同。我们都知道，无论这个变量是字符串类型，还是数字类型，我们都可以直接用 var 去定义它。比如：var a = 'hello word'; var b = 88;为什么可以这样做呢？这是因为：JavaScript 是一种「弱类型语言」，或者说是一种「动态语言」，这意味着不需要提前声明变量的类型，在程序运行过程中，类型会自动被确定。JS 的
2021-09-25 14:39:27
224
原创 Javascript简介
目录发展历史JavaScript的发展：蒸蒸日上JavaScript介绍JavaScript入门易学性JavaScript是脚本语言JavaScript的组成JavaScript 的特点特点1：解释型语言特点2：单线程特点3：ECMAScript标准JavaScript代码引入方式方式1：行内式方式2、内嵌式方式3：引入外部的 JS 文件Web前端有三层： HTML：从语义的角度，描述页面结构 CSS：从审美的角度，描述样式（美化页
2021-09-24 22:42:10
164
原创 js实现无缝轮播图
一、轮播图需求需要实现每隔一定时间进行下一张图片的自动轮播 需要点击左右按钮可以进行上下图片的切换 显示当前位置的小圆点 点击小圆点可以切换到对应的图片上 鼠标移入可视区时，停止轮播，显示左右按钮下面我们来看一下效果图：二、轮播图的原理图片移动实现原理：利用浮动将所有所有照片依次排成一行，给这一长串图片ul添加一个父级的遮罩（就是可视区），每次只显示一张图，其余的都隐藏起来。对图片添加绝对定位，通过控制left属性，实现照片的移动。 图片移动动画原理：从当前图片移动到下一张...
2021-09-11 21:58:44
4086
原创 子元素相对于父元素水平垂直居中的几种方法
方式一：绝对定位 + margin（需要指定子元素的宽高，不推荐） 1.1 代码及效果:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d...
2021-08-17 14:44:28
3830
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人