- 博客(15)
- 收藏
- 关注
RSS订阅原创 CSS之Grid布局
目录结构划分以及组成代码实现规划网格定位格子区域隐形网格效果展示Grid专为布局而生。Flexbox是沿着两条轴排列分布，定义空间的分配。Grid则是把子结点布到网格中，这个网格可以是预设好的几行几列，也可能是自动生成的隐式的网格，总之头脑中始终要有一个“网格”的意象。Grid的规则属性很多，其中不乏一些是shorthands。我们需要先充分理解Grid模型，才能得心应手。在布局上，它绝对是一柄利器。兼容性前面说了，目前PC端上支持还是比较成熟的，移动端上不建议用。结..
2022-01-25 11:56:28
1698
原创 Javascript基础之Promise
各位小伙伴,又见面啦 ! 今天给大家讲讲promise吧众所周知,回调函数噩梦(恐怖回调)，也被称为恶魔金字塔，指如ajax依赖调用时，回调函数会层层嵌套，而这种层层嵌套的写法，往往会让人难以理解，所以称之为噩梦。例如：服务器中有3个txt文件，我们需要在html上，通过js中的异步的ajax，分别获取这3个文件的内容，假设这3个文件分别存储的数据为1、2、3，那么我希望在js中，能够求出1+2+3，把6输出。 var str = "";$.ajax({ type: "get",
2021-02-03 19:54:49
1046
2
原创 什么时候不该使用ES6箭头函数
从开始接触es6到在项目中使用已经有一段时间了,es6有很多优秀的新特性，其中最有价值的特性之一就是箭头函数,它简洁的语法以及更好理解的this指向都非常的吸引我.但是新事物也是有两面性的,箭头函数有它的便捷和优点,但是它也有缺点,他的优点是代码简洁,this提前定义(不用在定义this),但他的缺点也是这些,比如代码太过简洁,导致不好阅读;this提前定义,导致无法使用js进行一些ES5里面看起来非常正常的操作。针对这些缺点,下面我就总结一下什么情况下不该使用箭头函数。1.在对象上定义函数 va
2021-01-10 17:35:08
339
2
原创 JavaScript基础之正则表达式
1.概念正则表达式（Regular Expression）是用于描述一组字符串特征的模式，用来匹配特定的字符串。通过特殊字符+普通字符来进行模式描述，从而达到文本匹配目的工具。正则表达式目前被集成到了各种文本编辑器/文本处理工具当中2.创建方式 (1) 字面量创建var reg = /day/ig; (2) 构造函数创建var reg = new RegExp("day","ig");3.语法 (1) 规则(表达式) 写在//之间...
2021-01-07 13:13:29
194
原创 JavaScript经典案例之滑块验证解锁
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> // 引入矢量图标库 <link rel="stylesheet" href="https://at.alicdn.com/t/font...
2021-01-04 13:34:25
1046
1
原创 JavaScript经典案例之鼠标拖拽
实现原理:鼠标按下时根据onmousemove事件来动态获取鼠标坐标位置以此来更新div的位置，实现的前提是div要有一个定位效果，不然的话是移动不了它的。首先先分析一下需求,这个需求就是点击时鼠标按下你才能移动并改变div在页面中的位置,鼠标松开你就不能在移动了。所以这里鼠标的状态有三个，分别是点击时鼠标按下（mousedown事件）、移动时鼠标移动（mousemove事件）、松开时鼠标抬起（mouseup事件)1. 鼠标拖拽时,记录鼠标按下的位置,具体分析如下图其中e.pageX,e..
2021-01-04 12:00:29
602
1
原创 Javascript 数组Array的迭代(遍历)方法
1.forEach(function(item,index,array){}) 单纯遍历,默认不影响原数组 item循环的当前元素 index循环的当前下标 array原数组返回值: undefined实例:var arr = [5, 23, 16, 49, 100, 72, 32, 27];arr.forEach(function(item, index, arr) { console.lo...
2020-12-31 16:28:50
538
原创 Javascript 数组Array的常用方法
目录push() 在数组尾部添加一个或多个元素,并返回新增元素之后数组的长度,影响原数组unshift()在数组头部添加一个或多个元素,并返回新增元素之后数组的长度,影响原数组pop()删除数组尾部的元素(一次只能删一个),并返回被删除的元素,影响原数组shift()删除数组头部的元素(一次只能删一个),并返回被删除的元素,影响原数组splice()任意位置的增删改slice(startIndex,endIndex)数组的裁切,并返回...
2020-12-30 11:01:45
116
原创 Javascript之a++和++a的区别
a++和++a都是表示自增1,但具体有什么区别呢?++a 表示先自增,在赋值a++ 表示先赋值,在自增让小编给大家举个栗子看看吧:var a = 12;var sum = a++ + ++a + ++a * 2 + a-- + --a;我相信有部分小伙伴看到这种题头都大了吧,具体解析如下:var a = 12;// a = 13 14 15 14 13var sum = a++ + ++a + ++a * 2 + a-- +...
2020-12-30 09:14:57
486
原创 关于margin-top兼容问题
关于margin-top兼容(传递)问题,我相信不少小伙伴在日常生活中经常遇到吧,我先举个栗子吧,这样便于大家理解html代码: <div class="box"> <div class="child"></div> </div>css代码: * { margin: 0; padding: 0; } .box {
2020-12-21 16:12:54
561
原创 css基础总结-------这一篇就够了!!
1.html和web网页的组成部分1.1 什么是html? 超文本标记语言1.2 常用标签 文本标题 h1-h6 段落 p 空格 加粗 b strong 倾斜 i em 强制换行 <br/> 水平线 <hr/> 上标 <sup></sup> 下标 <sub></sub> 列表 有序列表 ol li 默认是有一个实心圆 想要改变列表的符号样式 给ol
2020-12-19 09:06:00
3363
12
原创 上下margin重叠的问题 看我这篇就懂了
打工人，打工魂，打工都是人上人边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。很多前端小伙伴在学习或者工作过程中会碰到上下盒子外边距重叠的问题，之前小编碰到这类问题也是琢磨了好久没弄出来----------这波大意了，没有闪，今天让小编给大伙避避坑，我先讲讲在规范文档中，2个或2个以上的块级盒模型相邻的垂直margin重叠的计算方法吧1.全部都为正值，取最大者；2.不全是正值，则都取绝对值，然后用正值减去最大值；3.
2020-12-12 12:42:02
1337
2
原创 前端面试之标准盒模型和怪异盒模型
众所周知，我们常见的两种盒模型，一种是W3C盒模型（标准盒模型），另外一种是IE盒模型（怪异盒模型），很多小伙伴分不清楚这两个到底有什么区别呢标准盒模型从图中不难看出，在标准盒模型中盒子的宽：width= content的width盒子的高：height=content的高怪异盒模型在怪异盒模型中，盒子的宽：width = content的width+padding+border盒子的高:height = content的height+padding+border上面的内容小伙伴可能知
2020-12-09 15:28:27
595
原创 CSS布局---两栏布局的四种实现方式
在一些后台管理系统中，两栏布局还是比较常见的，当然两栏布局在面试的时候也是非常常见的，具体怎么实现的呢，我总结了几个能够实现的方法，让我们来看看吧：（一） 通过触发BFC实现基本上我们看到这种并列排排站的布局，可能第一时间就会想到浮动。左浮动排队。不过这里其实一个浮动就行了：具体实现效果如下：html：<div class="box"> <div class="a"></div> <div class="b"><
2020-12-07 13:51:56
1019
原创 BFC之深入浅出
**BFC的个人见解** BFC全称块级格式化上下文，BFC是css中一个隐含的属性，开启BFC该元素会变成一个独立的布局区域。BFC的布局规则内部的box会在垂直方向，一个接一个地放置。box垂直方向的距离由margin决定。属于同一个BFC的两个相邻box的margin会发生重叠。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。计算BFC的高度时，浮动元素也参与计算。BFC不会与浮动发生重叠触发BFC的条件：设置
2020-12-05 17:15:24
285
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人