- 博客(24)
- 资源 (6)
- 收藏
- 关注
转载 RefereceType与this指向
如果调用括号()的左边是引用类型的值,this指向引用值的base对象(baseObject),在不适引用类型的情况下,值为null。此引用类型不是数据的引用类型,而是一种规范类型,他主要是一个指代,代替一个标识符或属性的表示方式,你可以将引用类型就看成是一个标识符的一种表示方式,保存了标识符的一些信息,需要真实值时又可以通过它找到真实值。(foo.bar)(),这里用到了一个小括号,它在这起到分组符作用,也就是它不会迫使引用类型执行GetValue方法,其执行结果,跟上面一模一样。...
2022-08-09 23:04:06 193
转载 执行上下文与词法环境
可以理解为当前代码的运行环境,同一个函数在不同环境中运行,会因为访问的数据不同导致产生不一样的结果,你可以抽象为一个执行代码的地方或者是抽象为内部对象用来描述代码的执行时环境,包含代码执行时的信息,该环境由js引擎构建。也叫执行上下文栈,是一种LIFO的数据结构(后进先出),用于存储执行上下文,用于追踪执行环境的执行。js引擎首次遇到时,会创建全局上下文并压入栈顶,然后每次执行函数都会创建新的上下文压入栈中,执行完后,执行上下文从栈顶弹出。以下有三个上下文。.........
2022-07-24 21:49:34 424
原创 深入剖析立即执行函数的执行方式
表达式讲立即函数之前,首先来理解什么是表达式表达式: 指的是可以被求值的代码,也就是说只要代码能求得(返回)一个值的,它就是表达式。例子:以下都是表达式,这里只举一部分例子。var a = 10 //赋值表达式,它的结果就是 10a; //变量表达式,它的结果就是10123; //也是表达式 它的结果就是它本身'abc'; //字符串表达式 结果是自身var arr = [1,2,3]; //数组创建表达式,结果是数组的引用地址a[1]; //数据访问表达式,它的结果就是2
2022-05-05 22:41:31 410
原创 js 作用域
作用域标识符生效的区域。作用:提高程序的可靠性,减少命名冲突全局作用域个script标签或一个js文件中会形成一个区域叫全局作用域,在整个script中,变量都可以起作。在srcipt标签内的全局作用域中定义的变量是全局变量,在全局下都可以使用。局部作用域:在函数内部也会形成作用域也叫局部作用域 这里声明的变量只在整个函数内部起作用(也就是说在函数外不能访问到函数内的代码)在函数里定义的变量是局部变量,只在函数内部起作用。在函数里可以访问函数外的变量,换句话说局部作用域是在全局作用域范围里面
2022-04-29 21:54:54 162
原创 js浅析预解析(es6之前)
此文想深入理解的话可以看看汤姆大叔的博客:https://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html非常详细,看懂了这里面的所有文章,理解作用域、闭包、变量对象、原型都不是问题。js大致运行过程1.语法分析:js代码在执行之前,会通篇扫码一遍代码,有没有低级的语法错误,比如: 中文的括号,如果有错误,就一行代码都不执行console.log(1111);console.log(22); //中文的分号console.log(55
2022-04-23 22:50:52 289
原创 js arguments的特性
arguments在js中函数的参数天生不定参,形参可以比实参多,实参也可以比形参多并且不报错,因为在每个函数中都有一个arguments,叫做实参列表,它是一个类似于数组的对象,它会按照实参的顺序保存着所有传递给函数的实参。也就是说它会接收完所有的实参。没有传递值的形参,值默认为undefined。// num2的值是undefined//形参就相当于在函数中隐式的声明了两个变量var num1,num2function fn(num1,num2){ //arguments接收完所有的实参
2022-04-13 22:30:01 180
原创 js 数据类型转换
显示类型转换由开发人员手动调用一些方法将数据强制转换成另一种类型。Number()方法:将数据转换成Number类型,无法转换的数据会返回NaN。例子://字符串123转换成数字类型的123 var num = Number('123'); // number:123console.log(typeof(num) + " : " + num); //NaN 字符串只有数字字符串才能转换数字类型,其它的字符串不能被转换 console.log(typeof Number("a"))
2022-04-05 22:27:16 295
原创 js 引用值和原始值
数据类型js将数据类型分为两种:1. 原始类型原始类型分为五大类: Number,String,Boolean,Undefined,Null类型。原始值是固定的简单的数据,也就是说数据的大小不会发生变化,并且不能由其他值组成。Number: 数字类型,1、1.1、-1等等,js中数字类型就包括了浮点型。String: 字符串类型,带有一对单引号(’ ')或双引号的值(" "),表示字母、符号、数字的统称。比如,我们要输入中文必须但引号: “你好世界”。Boolean: 布尔类型,只有两个值tr
2022-03-20 23:32:37 1194 1
原创 css居中的总结
text-align行内元素或行内块元素的居中<style> .parent{ width: 200px; height: 200px; text-align: center; background: red; } .children{ /* 行内块也具有行内元素的特性 因此使用text-align也有效果 */ display: inline-block; width: 100px; height: 1
2022-03-13 22:17:39 80
原创 html中什么是数据链接?
数据链接(data url)将目标文件的数据(二进制)直接写到路径位置。如何书写默认情况下是写保存着图片数据的文件夹路径,然后浏览器根据路径找到这个保存图片数据的文件夹,然后把文件夹里面的数据读取出来,然后解析数据显示成图片。语法:data:MIME类型,数据 这样就表示这里使用数据而不是路径<img src="./img/a.jpg"/><!--实际上是把直接图片数据读取出来,然后根据数据渲染成图片显示到页面上dataurl的意思是我不写数据的路径,而是直接将数据写在sr
2022-03-06 22:44:56 538
原创 css的auto值是什么意思
auto值的介绍auto表表示自适应,由浏览器去自动计算auto值,auto在不同的环境下表示不同的意思。在文档流模型中的auto值:块级元素的auto:可用设置auto值的属性: width、height、margin。当以上这些属性设置水平方向上的值为auto时,表示计算包含块的剩余可用空间,它会自动计算计算包含块的剩余空间。当以上这些属性设置垂直方向上的值为auto时,height会自适应内容,margin上下会计算为0,原因是块级元素在垂直方向上并不要求占满一行,原理可以看我这篇博客:
2022-03-05 13:09:26 2456
转载 移动端布局(三) rem布局及原理
什么是rem首先来了解一下什么是em:作为font-size的单位时,其代表父元素的字体大小,em作为其他属性单位时,代表自身字体大小。s1、s2、s5、s6的font-size和line-height分别是多少px?<div class="p1"> <div class="s1">1</div> <div class="s2">1</div></div><div class="p2">
2022-02-17 21:56:45 9826
原创 A 文档流布局以及margin:auto的原理
常规流布局也叫常规流、文档流、普通文档流、常规文档流,浏览器默认的排列方式。将窗体自上而下分成一行行,按照源代码的顺序排列将块级元素从上到下、行内元素在每行中从左至右的依次排放元素,并占据文档一定的空间。常规流快盒的水平布局规则:每个块盒的总宽度(margin border padding content加起来),必须刚好等于包含块的宽度,因为要独占一行。盒模型属性中只有这三个值可以设置auto的值:width、margin-left、margin-right宽度(width)的默认值:aut
2022-02-10 11:28:06 912
转载 css布局方法的总结
双inline-block方案方法是通过calc(100% - 140px)动态计算右侧盒子的宽度缺点:需要知道左侧盒子的宽度,两个盒子的距离,还要设置各个元素的box-sizing需要消除空格字符的影响需要设置vertical-align: top满足顶端对齐。.warpper-inline-block{ box-sizing: border-box; font-size: 0;}.warpper-inline-block .left,.warpper-inline-bloc
2022-01-09 18:33:06 111
转载 移动端布局(二)关于视口
简单来说<meta name="viewport" content="width=device-width,initial-scale=1.0">的解释content属性值:width:可视区域的宽度,值可为数字或关键词device-widthheight:同widthintial-scale: 页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别,maximum-
2021-12-31 23:10:09 1308
转载 移动端布局(一)dp、dip、PPI、dpr、图片模糊
高清屏即高清屏,把更多的像素压缩至一块屏幕里,从而达到更高分辨率显示的细腻程度,使人眼无法分辨出单个的像素。物理像素物理像素,设备的硬件像素,生产出来就已经设定好了的真实像素,不能被改变。是计算机屏幕渲染画面(图像)的最小单位,整个图像是由像素单位组成的,这个单位的形状通常都是会发光的正方形方格,在相同尺寸屏幕中,像素点越多,像素点就越小就越清晰(因为你在该屏幕内容纳更多的像素像素点自然会缩小),像素点越少,像素点就越大,图像就不清晰,因为你都能看到像素点的锯齿状。分辨率指的就是水平垂直方向上像素
2021-12-24 22:59:11 2080
原创 css 定位是什么
定位通过定位可以将元素摆放到页面的任意位置,通过positio属性可设置定位类型。脱离文档流:CSS中脱离文档流,就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在position属性值:默认值:static,元素是静止的(不定位,该浮动的浮动该是常规流的是常规流)relative:相对定位absolute:绝对定位fixed:固定定位sticky:粘滞定位一个元素,只要position的取值不是static,认为该元素是一个定位元素.定位元素会
2021-12-01 23:11:46 420
原创 浮动是什么
浮动规定元素向左或向右移动,浮动元素会脱离文档流,其它常规流元素会填补它的空间,并且文字等行内元素会环绕在浮动元素的周围。文档流浏览器默认的排列元素的方式,按照源码的书写顺序依次将行内元素从左到右水平排列,块级元素从上到下垂直排列,并占据文档一定的空间。例子: .a{ border: 1px solid #000; } .b{ border: 1px solid yellow; } .c{
2021-11-02 23:32:18 212
原创 堆叠上下文
堆叠上下文(stack content)它是一块区域(跟bfc一样也是一块区域,可以影响在这快区域的元素),这块区域由某个元素创建,它规定了该区域中内容在z(平面垂直)轴上排列(覆盖)的先后顺序创建堆叠上下文的元素:1.html元素(根元素)2.设置了z-index(非auto值)数值的定位元素3.position 值为 fixed(固定定位)或 sticky(粘滞定位)的元素(沾滞定位适配所有移动设备上的浏览器,但老的桌面浏览器不支持);4.flex (flexbox) 容器的子元素,且 z-
2021-07-04 21:58:27 130
原创 块级格式化上下文规则(常规流BFC IFC)
格式化上下文(就是盒子排列渲染的规则)是页面上的一个隔离独立的渲染区域,规定盒子怎么布局。在普通流中,所有的盒子(不管是内联盒子(内联元素等)还是块级盒子(块级元素等)都要属于一个格式化上下文,不是属于块级格式化上下文就是属于内联格式化上下文,但是不能同时属于两者,块级元素布局遵循块级格式化上下文的规则,内联元素布局遵循内联格式化上下文的规则来进行布局.就是这两个规则使得页面的所有元素有序的布局,才呈现出我们所看到的web页面。注:视觉格式化模型中包含了常规流,而常规流包含了块格式化上下文和行格式化上
2021-06-30 23:24:42 314
原创 视觉格式化模型
视觉格式化模型规定页面中多个盒子的排列规则,盒子该怎么摆放、渲染成什么样子。盒模型也包含在这个规则里面。盒模型:规定单个盒子的规则(盒子有哪些部分组成?行盒是怎么样的,快盒是怎么样的)。视觉格式化模型会根据CSS盒子模型将文档中的元素转换为一个个盒子,每个盒子的布局由以下因素决定:盒子的尺寸:精确指定、由约束条件指定或没有指定盒子的类型:行内盒子(inline)、行内级盒子(inline-level)、原子行内级盒子(atomic inline-level)、块盒子(block)定位方案(p
2021-06-20 23:17:19 263
原创 权重的计算
权重样式冲突:同一个样式,多次应用到同一个元素。是指解决样式声明冲突的过程,浏览器自动处理(浏览器自动计算)。比较重要性比谁的样式表更加重要,这一步能筛选选出样式就不看下一步了。CSS样式表有三种来源:user agent stylesheet: 用户代理的默认CSS(就是浏览器默认的CSS)author style sheets(作者样式): 开发人员定义的CSS(前端开发人员写的external-style,embeded-style,inline-style)user style s
2021-06-14 11:46:23 255
原创 盒模型是什么
盒模型盒模型的简介盒模型的组成盒模型的简介盒子:css将每个元素在文档中都生成一个在矩形区域并且占据一定的空间,这个矩形区域就相当于我们日常生活中盒子,比如买手机时,手机会用一个盒子包装。模型(model):模拟盒子(元素)的形态(跟装手机的盒子一样都由content padding boder margin组成)。盒模型的组成...
2021-06-13 18:57:41 1499
响应式静态页/响应式静态页/响应式静态页/响应式静态页/响应式静态页/响应式静态页/响应式静态页/响应式静态页/响应式静态页/
2022-03-14
小米静态页/小米静态页/小米静态页/小米静态页/小米静态页/小米静态页/小米静态页/小米静态页/小米静态页/
2022-03-14
移动端网易/移动端网易/移动端网易/移动端网易/移动端网易/移动端网易/移动端网易/移动端网易/移动端网易/移动端网易/
2022-03-14
移动端淘宝/移动端淘宝/移动端淘宝/移动端淘宝/移动端淘宝/移动端淘宝/移动端淘宝/移动端淘宝/移动端淘宝/
2022-03-14
淘宝静态页/淘宝静态页/淘宝静态页/淘宝静态页/淘宝静态页/淘宝静态页/淘宝静态页/淘宝静态页/淘宝静态页/淘宝静态页
2022-03-14
京东静态页/京东静态页/京东静态页/京东静态页/京东静态页/京东静态页/京东静态页/京东静态页/京东静态页/
2022-03-14
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人