- 博客(29)
- 问答 (2)
- 收藏
- 关注
RSS订阅原创 iframe隐藏帧实现假异步提示
iframe的说明iframe相当于页面的一个子页面，效果如图：由图可见，作为子页面的iframe有自己的document，所以当我们通过iframe来获取当页面内容需要在document前加上parent即父级。iframe的使用当我们想要提交表单的结果显示在iframe中，我们需要在form表单中加入target指向iframe（与其name一致）但当我们不想让提示内容显示在if...
2020-01-18 16:51:10
184
原创 使用apply数组的最大值
arr = [45,12,35,45,98,12,19,02,30,21]; console.log(Math.max.apply(null,arr)); //结果：98 使用apply一定要写第一个参数 不然出不来
2019-12-13 20:48:05
249
原创 background的css3新属性
background-clip 指定背景绘制区域属性值：border-box绘制边框以内的区域padding-box 绘制内边距以内的区域centent-box 仅绘制内容区域background-origin 背景的起始定位属性值：border-box 从border的左上角开始定位padding-box 从padding的左上角开始定位content-box 从内容区的...
2019-12-12 21:43:19
152
原创 mouseover和mouseenter的区别
mouseenter是穿过，所以只能触发一次改事件，而mouseover是位于上方，可以想下，如果给div设定了一个mouseover事件，其子孙后代都可以响应改事件，so…一旦鼠标从父级进入自己也会触发这个效果，当从子集回到父级也会触发这种效果。所以，你可以这么理解：mouseenter事件只作用于目标元素，而mouseover最用于目标元素及其后代元素。...
2019-12-07 18:58:44
138
原创 css图片按比例缩放
img{ width:auto; height:auto; max-width:100%; max-height:100%;}这样设置图片可以使图片在指定的空间内缩放
2019-12-07 14:57:30
115
原创 css3新属性：pointer-events:none解决鼠标进入闪烁问题
在实现一个侧边栏的小导航，鼠标经过导航出现对应内容块，可在鼠标停留在导航里面显示层就一直闪烁，应该是在鼠标进入后移动到子级触发的事件冒泡导致的，查了很多解决方法，都看不懂…，直到看到了pointer-events。pointer-events:none解决鼠标经过闪烁问题给目标元素添加上pointer-events:none属性pointer-events:none属性 的作用：添加上该属性...
2019-12-06 18:04:51
1125
原创 ...扩展操作符的使用
（…）扩展操作符的使用用法：用于将对象或数组或者数据结构展开的操作符（…）1.用于数组：2.也适用于对象：3.也适用之前遇到过的数据结构var arry = [4,3,3,9,12,19,11,9,3];var arr2 = [...new Set(arr)];console.log(arr2.sort((a,b)=>a-b));//结果：(6)[3,4,9,11,12,1...
2019-12-05 12:19:03
146
原创 for循环闭包问题
记录我学JavaScript踩的第一个坑在实现一个输入数量算商品总价的表格，可事件函数内部的i值总获取不对，还好问了群里的大神，太感谢了。说是一个for循环内部嵌套事件函数引起的闭包问题i获取不到的原因是因为，事件函数内部没有i这个值，就会到外部函数查找，而外部函数的值是每次循环后的结果，所以一直都是获取到7，下面的赋值自然就会报错。解决方案：解决方法一： 将for循环的var改成let，...
2019-12-04 21:34:37
955
原创 数组去重Set(),以及Array.from和扩展运算符(...)的使用
// ------------------------------Set----------------------------------------// Set()是ES6提供的新的数据结构，类似于数组 但不会有重复的值// Set是一个构造函数 所以生成的是set数据结构var s = new Set(); // 添加 s.add(5); s.add('666'); s.a...
2019-11-28 10:15:26
1795
原创 继承
1.借用构造函数//借用构造函数 创建父函数function Person(name,sex,age){ this.name = name; this.sex = sex; this.age = age; } Person.prototype.sayHi = function(){ console.log('安妮哈赛呦'+this.name); } function S...
2019-11-27 13:51:12
94
原创 给div设置height：100%
div设置100%的高度前提需要其所有的父元素都有高度，才能生效。例如让一个div占满整个页面的高度，就需要将html和body都设置为height：100%
2019-11-18 18:03:51
1300
原创 font-awesome用法
font-awesome的引用（在官网下载）CSS — 字体的引入,图标基础样式,大小等fonts — CSS需要引用字体文件夹,本地用户需要安装内部的 fontawesome-webfont.ttf(CSS引入字体)基础样式用法<i class="fa fa-weixin"></i>微信设置大小<i class="fa fa-weixin fa...
2019-11-18 16:01:18
984
1
原创 如何让背景图按div自适应大小
background：url(’…/…png’) center center no-repeatbackground-size:cover
2019-11-10 15:26:39
4135
原创 关于link标签
link标签要放在head里面rel是指引入的外部文件与定义文档的关系，如css即样式文件为stylesheet、标题图标为short icon注：icon一定要放下根目录下，不要有带www，在www的网站下会不显示type可写可不写...
2019-11-10 11:13:57
301
原创 undefined和null
undefined == null 返回值为true当一个变量未赋值即返回undefined当我们要定义空对象时，可以先赋null
2019-11-10 11:07:32
85
原创 box-sizing:border-box
box-sizing:border-box指由原盒模型转变为：width = padding + border + 原宽度
2019-11-08 20:40:06
110
原创 text-size-adjust用法
前提：使用前需要加上兼容写法用法：在移动端为防止字体变大，添加-text-size-adjust属性为100%可防止字体变大放在body会导致页面缩放失效可以使body继承html的样式...
2019-11-08 20:37:41
2088
原创 页面布局
一列布局设置margin：0 auto 实现居中（实际开发中width不需要固定宽度，由里面的子元素撑开，实现自适应）两列布局两列自适应布局：left.width+right.wigth = body.width（100%）,各自左右浮动两列居中 body：margin：0 auto；width = leftw + rightw三列布局自适应三列布局：leftw + mainw + r...
2019-11-08 18:57:04
117
原创 will-change的使用
前提：为加快页面加载速度，增强页面渲染性能，有以下三种方法：position-fixed代替background-attachment将带图片的元素放在伪元素里面巧用will-changewill-change的用法前提：因CSS3的动画、渐变和变形不会自动触发CPU的加速，而使用浏览器自身进行渲染，不使用will-change 的一个小技巧：translateZ() (or tr...
2019-11-08 18:30:59
585
原创 keyframes 关键帧
keyframes 会逐渐地实现过渡动画过程中每一关键帧的动画效果语法： @keyframes animationname { //必须带上动画名 keyframes-selector{ //值是一个百分数，0%、25%...（from为0%，to为100%） css-style // 执行的动画内容，可为多值 }}ps：keyframes也需...
2019-11-07 18:00:40
173
原创 纯CSS3实现旋转太极图效果
学习作业：用刚学的animation动画和结合之前的伪类，实现一个纯CSS3的太极图的动态效果<style> div{border:1px solid red; border-bottom: 51px solid red; width: 100px; //102px height: 50px; //height = border+height(102px) 实现一...
2019-11-07 16:19:34
286
原创 CSS3之animation动画
CSS3之animation动画animation-name属性定义动画的名字ps：光有动画名称不能是动画动起来与@keyframes合用语法：animation-name {动画名称}；@keyframes 动画名称{from {开始动画}to{结束动画}}animation-duration 过渡持续的时间属性语法：animation-duration：time注：动...
2019-11-07 15:21:07
379
原创 清除浮动的三种常用方法
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...
2019-11-07 11:02:54
247
原创 position
position之static 自然流将设置定位且偏移的元素回到自然流中，可能会跟相邻的元素产生重叠，如下图：想将元素置回原来的自然流中—position：static（忽略top、left、right等）在这种自然布局下的特点：两个相邻外边距margin最终值1：两值相等：重叠2：两值不相等，去最大值忽略top、left、right等有固定width和height的元...
2019-11-07 11:02:25
123
原创 CSS3之transition过渡
CSS3之transition过渡-property属性：参数：none、all和property（元素的属性名，如：transform）-duration 过渡（过程中的延迟）时间属性：参数：time时间语法：transition-duration:time(单位为ms毫秒/s秒)-time-function属性参数：linear 匀速运动ease 平滑过渡（默认），逐渐加快...
2019-11-07 11:00:26
178
原创 CSS3新增属性之transform
transform2d平面转换属性：rotate 旋转单位为deg（正数为顺时针旋转，反之逆时针）单位和数值都紧接着在中括号内，如：transform:rotate(10deg)skew 扭曲变形 有X轴和Y轴两个方向，单位与上面一致 单独X轴为：skewX 反之为skewY，还有skew(x，y)两个方向同时translate 按一定数值进行偏移 ，以元素的的左上角为起始点有tr...
2019-11-07 10:59:54
202
原创 h5新增标签
大概分为以下五类结构标签(块状元素)___有意义的标签：1.<artical> 标记定义一篇文章2.<header> 标记定义一个页面的头部或一个区域的头部3.<nav> 标记定义导航链接4.<section> 标记定义一个区域块5.<aside> 标记定义侧边栏（通常和artical合用...
2019-11-05 09:51:33
162
空空如也
设置了绝对定位div里的文字不显示
2019-12-06
如何用transform:translateY()使元素偏移到页面底部
2019-11-07
TA创建的收藏夹 TA关注的收藏夹
TA关注的人