自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(15)
  • 收藏
  • 关注

原创 &nbsp

字符ASCII码不间断空格(No-break Space,简称NBSP)160空格(Space)32HTML会将多个连续的空格压缩成一个空格,所以网页布局时按再多空格键,也只显示一个空格;要想显示多个空格的位置,要使用 也就是「不间断空格」;注意:微信发消息,所有的空格会被转为不间断空格如果用微信直接传代码,再黏贴到vscode中,vscode中不会显示,但是在页面上就会有一堆空格破坏布局样式微信传代码需谨慎...

2021-04-25 23:02:09 161

原创 (class与className、prop与attr、属性与属性节点)的联系

ele.xxx=yyy与ele.setAttribute(‘xxx’,‘yyy’)的区别两个概念:1、元素节点对象的属性2、元素节点下的属性节点两者是交集典型例子:className是属性;class是属性节点节点:nodeName,nodeValue,nodeType...

2021-02-21 14:31:44 730

原创 点击事件抛发与按钮状态的关系

结论:只有元素设置属性disabled=“disabled”,抛发才会被禁止,其他情况均不影响点击事件抛发按钮状态:原始状态display:nonevisibility:hiddenpointer-events:none被覆盖页面隐藏溢出窗口disabled=“disabled”事件抛发√√√√√√√×鼠标触发√×××××××目录一、按钮的不同状态对事件抛发的影响1.原始状态2.按钮 display:none3.按钮 vis

2021-01-27 14:56:23 187

原创 HTTP与cookie知识总结

HTTPhttp 是我们前后台交互的时候的传输协议(即超文本传输协议)HTTP 的工作流程和服务器建立链接建立链接后,发送一个请求给服务器(请求)服务器接受到请求以后进行相应的处理并给出一个回应(响应)断开于服务器的链接和服务器建立链接怎么和服务器建立链接呢?需要保证客户端的接受和发送正常,服务器端的接受和发送正常这里就涉及到一个东西叫做 TCP/IP 协议建立链接的主要步骤叫做 三次握手客户端发送一个消息给到服务端此时: 服务端知道了 客户端可以正常

2021-01-25 21:30:00 100

原创 原型链图解

目录1.对象的原型链2.函数的原型链3.总的原型链4. 总的原型链(精简版)——原型链的顶端是null5. new的路线图6. 总路线图1.对象的原型链2.函数的原型链3.总的原型链4. 总的原型链(精简版)——原型链的顶端是null5. new的路线图6. 总路线图...

2021-01-08 12:16:47 110

原创 i++与++i的运算优先级,以及对运算的再认识

var a=1// alert(a++ + a) //3// alert(a + (a++)) //2// alert(++a + a) //4// alert(a + (++a)) //3// alert(a + (++a)+a) //5运算实质是返回值,是不会改变运算数的值的,递增与赋值实际是附带作用所以所谓的运算符优先级就是 表达式 返回结果的顺序a + (++a)+a中(++a)可以拆解成两部分:1.运算,也就是返回(++a)的值,返回值的过程中没有改变a的值2

2020-12-29 16:23:26 439

原创 为什么解构赋值能交换两个变量

let a = 1;let b = 2;[a, b] = [b, a]console.log(a, b) //2,1通过解构赋值,不需要第三个变量就能交换两个变量的值我当时再看到这个案例是疑惑的,为什么没有中间量就实现变量交换了?在菜鸟教程中是这样描述解构的解构模型在解构中,有下面两部分参与:解构的源,解构赋值表达式的右边部分。解构的目标,解构赋值表达式的左边部分。看到这,我下意识的将[a, b] = [b, a]整体看作解构,即解构:解构目标=解构源但其实解构只是左边的部分,

2020-12-28 22:05:03 1803 2

原创 浏览器对「浮点型像素」的处理与造成的问题,以及对「可视区域」的探究

谷歌浏览器中,1屏幕像素×0.8=1css像素0.8很容易联想到研究边框时最小能显示的0.8px如果把0.8px乘以1.25就等于1px,所以谷歌显示小数像素并不是使用了什么亚像素,而是将所有正常的css像素放大1.25倍显示,0.8px的css像素对应的就是一整个设备像素,而不是0.8个像素如果你的屏幕宽是1920px,将所有内外边距清零,创建一个宽1920px的div就会发现,元素超出屏幕,出现水平滚动条,而且超出不是一星半点;而div的宽设为1920*0.8=1536px,滚动条就会消失,再多加

2020-12-20 16:43:37 1310

原创 document.body.clientHeight 只是窗口高度四舍五入的结果,宽度也是如此

在测试拖拽时,要实现被拖拽的元素不能跟鼠标一起跑到窗口外;所以在style.top<0时使其style.top=0在style.top<document.body.clientHeight - div1.offsetHeight时,使其style.top=document.body.clientHeight - div1.offsetHeight(即窗口高度 减去 元素高度,就是元素能被拖拽到的最低位置,当小于这个最小值时,直接把最小值赋值给它)但是出现了一个bug,如下图按理说我把

2020-12-19 14:54:39 3215 1

原创 js鼠标移入移出事件对比

ie8之前的方法鼠标移出 mouseover鼠标移入 mouseoutie8之后的方法鼠标移出 mouseenter鼠标移入 mouseleave两者区别 <div id="red"> <div id="blue">0</div> </div> <script> var red=document.getElementById("red") var blue=docum

2020-12-17 18:02:19 708

原创 浮动布局在页面缩小时的布局变形问题,原因,及一种解决办法

问题描述:浮动布局在页面缩小时,布局变形,最后一个子元素被挤到下一排。效果如下↓效果展示:问题出现的条件:1.宽度采用px固定值;2.子元素宽度相加,正好等于父元素宽度;3.有左右边框问题出现的原因:你css里边框写的是1px,页面缩放到50%,就是0.5px,小于屏幕最小能显示的1px,是无法显示的;这个时候你的谷歌浏览器,就会把你写的1px变为2px,缩小一倍正好是原来的1px。但是这个时候,在css里,子元素多了1px,原来严丝合缝的布局被打破了,最后一个子元素就被挤下去了。c

2020-12-16 22:27:11 5195 1

原创 行级元素的高不是内容撑开的,与其font-size与font-family有关

可能大家初学前端时,都要记住行级元素的性质:1.行级元素不能设置宽高;2.其宽高由内容撑开。但实际上:行级元素宽度由内容撑开,但高度hieght只与其font-size与font-family有关测试1.写一个<span>标签,样式只添加一个红色背景与字体大小,background: red;font-size=20px运行结果:空白页面此时,谷歌浏览器点击F2弹出控制台,鼠标放在右边代码的<span>标签上,页面上显示其宽高为0×0;(这种方式显示的是可视区域的宽高

2020-12-14 21:15:53 1605 1

原创 css父子元素的盒子模型的包含关系,及100%与auto区别

文档流:1.父元素内容区(width) 包含 子元素整体(margin+border+padding+width)2.子元素紧贴父元素内容区左上角3.父元素(width)小于 子元素(margin+border+padding+width)时,子元素从右侧溢出子元素浮动:与文档流相同子元素相对定位,且不设置left等四个属性值,父元素相对定位:与文档流相同子元素相对定位,设置left=0;top=0;父元素相对定位:1.父元素内容区加内边距(width+padding) 包含 子元

2020-12-13 15:18:37 1334

原创 绝对定位中,left/right/top/bottom是参考谁确定的

绝对定位中,left/right/top/bottom是参考谁确定的left/right/top/bottom的值是父元素的border内侧 与 子元素的margin外侧的距离,也就是说如果left=right=top=bottom=0,父元素的内边距加内容区与子元素整个盒子模型重合父元素(padding+content)=子元素(margin+border+padding+content)...

2020-12-12 17:42:47 1027

原创 绝对定位溢出文档流的情况

绝对定位溢出文档流/窗口的情况绝对定位溢出文档流时,有两种情况:1.绝对定位元素从文档流下方与右侧溢出,窗口会被撑开,出现滑动条。2.从文档流上方与左侧溢出,元素溢出的部分会隐藏,窗口不会被撑开。绝对定位的元素从文档流下方与右侧溢出,还能撑出滚动条可以理解,绝对定位虽然脱离文档流,但并未脱离窗口,依然可以撑开窗口显示滑动条。而从文档流上方与左侧溢出被剪切隐藏的原因没搞明白,猜测是浏览器必须使文档流原点与浏览器窗口原点重合(左上角),以实现整个页面与文档流的布局与定位。如果左侧也能溢出撑开滑动条,那

2020-12-10 15:19:58 611

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

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