![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
进击的Bao
这个作者很懒,什么都没留下…
展开
-
垂直居中的几种方法总结
在CSS中最常用的就是居中对齐的样式,flex布局方法使得垂直水平居中变得非常容易,但是flex具有浏览器兼容问题,掌握其他CSS居中对齐的方法也是重要的。其中,水平居中较为简单,通过判断元素是行内元素还是块级元素就能轻松区分:行内或类行内元素:text-align: center;块级元素:margin: 0 auto;而垂直居中具有一定的难度,也有很多种方法;只要学好了垂直居中的几种方法,与水平居中轻松组合就能得出垂直水平居中的方案。line-height 行高适用于单行文本,不能应用于原创 2021-03-07 15:01:50 · 1282 阅读 · 0 评论 -
关于BFC的定义及应用总结
BFC的定义BFC(Block formatting context)块级格式化上下文,BFC里面的元素与外面元素隔离,使得里外元素的定位不会相互影响。不同类型的 Box, 会参与不同的 Formatting Context(一个决定如何渲染文档的容器),有Block formatting context(BFC)和Inline formatting context(IFC)等。BFC内部布局规则BFC作为一种 Formatting Context,是脱离文档流的,其内部具有特殊的布局规则,掌握其内原创 2021-03-07 14:42:30 · 648 阅读 · 0 评论 -
Javascript系列(九):类数组和数组
在JavaScript中,类数组和数组是两个不同的概念,同时也是需要区分清楚的。数组我们都了解,是JavaScript中的一个引用类型,那类数组是什么呢?类数组和数组之间的区别类数组拥有length属性和索引,是object;类数组不具有数组所具有的方法;例如内置对象arguments、DOM方法返回的结果都是类数组;类数组和数组相互转换数组转换为类数组数组转换成类数组,即将数组类型转换成Object类型,调用数组的原生push方法,同时通过apply改变this的执行,将this改为o原创 2021-03-07 14:24:55 · 966 阅读 · 0 评论 -
Javascript系列(八):关于let和const是否会变量提升?
网上很多博客和资料都写let和const不存在变量提升,只有var会产生变量提升,之前我一直对此深信不疑,直到看到大佬的文章开始对此产生了一点怀疑。在理解这个问题之前,首先看看var let const的定义和区别。var在ES5前声明变量只能用var,且只存在函数作用域:var message = "hi";message = 100; //可以改变变量类型,合法但不推荐age = 18; //不用var声明,代表全局变量var存在变量提升://变量age自动提升到函数作用域原创 2021-03-07 14:07:53 · 3872 阅读 · 0 评论 -
Javascript系列(六):手写call/apply/bind函数
简单介绍共同点:call apply bind 三个函数是Function对象中自带的方法,都是用来改变函数的this对象指向。不同点:第一个参数都是this要指向的对象,也就是想指定的上下文;call的第二个参数以逗号隔开,apply传入的是数组,bind第二个参数以逗号隔开;bind 是返回对应函数,便于稍后调用;apply 、call 则是立即调用;手写call函数Function.prototype.myCall = function(thisArg, ...args) {原创 2021-03-07 10:35:56 · 518 阅读 · 0 评论 -
Javascript系列(七):new的原理及手写
new的流程:创建一个新对象将原函数的this指向这个新对象将创建新对象中的__proto__(隐式原型)指向原函数中的prototype(显示原型)判断原函数是否主动返回对象或者function,如果没有则隐式返回this所指向的对象function new(){ //定义空对象 let obj = {}; //取出参数列表的第一个参数(构造函数) let Con = [].shift.call(arguments); //手动指正o原创 2021-03-07 10:30:13 · 503 阅读 · 0 评论 -
关于 flex:1 实际代表产生的思考
相信大家用过flex布局都会用到flex:1这样的语句来平分空间,但是关于flex:1实际等于什么却没有细细探索过。首先flex这个属性是一个缩写,实际上代表的是:flex:flex-grow || flex-shrink || flex-basisflex:1实际上是以上三种属性的缩写形式。flex-grow//定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大flex-shrink //定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小flex-basis//定义了在原创 2021-03-06 22:56:30 · 646 阅读 · 0 评论 -
mac中VSCode快捷键 整理
工欲善其事,必先利其器。开发项目时,快捷键的使用会大大的提高效率。整理几个我经常用到的快捷键和一些冷门但是很实用的快捷键。command + F 查找command + H 替换command + B 显示/隐藏左侧目录栏control + ~ 控制台终端显示与隐藏command+回车 直接跳到下一行这个非常好用,当光标在上一行的中间时,可以直接按command+回车,切换到下一行,而不需要用鼠标重新定位光标到下一行,非常提高效率option+shift+ ↑ / ↓ .原创 2021-01-03 16:59:33 · 2346 阅读 · 0 评论 -
Javascript系列(四):Event Loop 事件循环
一、Event Loop是什么?由于Javascript是单线程的,所有的任务在一个线程上完成。这会导致同一时间只能完成一个任务,如果前一个任务比较耗时,将会导致页面卡顿、假死等问题,用户体验极差,这被称之为“同步模式”和“堵塞模式”。为此,Javascript提供了一个叫做Event Loop(事件循环)的机制来解决单线程运行时阻塞的问题。相反,这叫做“异步模式”和“非堵塞模式”。Event Loop在浏览器和Node环境下会略有差异。二、Event Loop原理由于Javascript的单线程特原创 2020-12-10 16:32:11 · 697 阅读 · 0 评论 -
2020前端阅读书籍、读书笔记汇总~
2020年接触前端以来,踩过大大小小不同的坑,每次填坑都是从网上找博客、知乎看解答、有时候也会去github逛一逛。可能当下把坑填了,下次又遇到同样的问题又不知道怎么解决了,又或者填了一个坑的同时又埋下了新的坑,日常工作也成了填坑埋坑,不断往复。学到的前端知识也是零碎和没有体系的,无法串联成有用的知识结构有一次关于ECMAScript中所有函数的参数都是按值传递的这句话的理解,查阅了几篇博客,洋洋洒洒几千字讲下来看得我云里雾里,后来发现这句话就是红宝书P70的原话,看了书上的解释和例子之后豁然开朗,几个比原创 2020-12-09 14:49:38 · 1531 阅读 · 1 评论 -
关于Grid网格布局的用法整理
CSS传统布局一般都是基于盒状模型,有例如div+CSS,利用positon, float等布局,灵活性较高,但对于一些特殊布局(垂直居中)实现起来相当麻烦。flex弹性布局较好的解决了这个问题,同时flex的兼容性也相当不错,除了IE8.9以及其他浏览器一些低版本之外,基本上兼容现在主流的浏览器,如果没有特别需要保证IE的兼容性可以放心使用。flex是一维布局,即行列同时只能操作一个的,具体用法可参照:阮一峰Flex布局教程Grid布局与flex布局有类似的部分,建议学完flex布局再学习Grid原创 2020-09-01 16:07:16 · 1493 阅读 · 0 评论 -
px em rem区别
在CSS中的单位长度用的最多的就是px em rem,对于三者的区别以前没有细纠过,导致很多代码书写不规范,先给结论:px(pixel)是固定的像素点,是相对于显示器屏幕分辨率而言。em和rem比px更灵活,更适合响应式布局。em是相对于当前对象内文本的字体尺寸;rem是相对于html根元素。pxIE无法调整那些使用px作为单位的字体大小,px实际上就是计算机上的一个像素点,比较稳定和精确。但是缺点是无法根据设备的尺寸变化改变大小,从未无法自适应布局。em为了解决px的问题,提出了em。它原创 2020-05-15 11:24:06 · 1037 阅读 · 0 评论 -
HTTP五大知识点总结
HTTP基本概念Get和PostHTTP特性HTTPS与HTTPHTTP/1.1 HTTP/2 HTTP/3演变HTTP基本概念HTTP基本概念HTTP:超文本传输协议(HyperText Transfer Protocol),是一个在计算机世界里专门在两点之间传输文字、图片、音频、视频等超文本数据的约定和规范HTTP常见的状态码200 OK:一切正常,返回响应头有bod...原创 2020-04-26 22:34:18 · 767 阅读 · 0 评论