摘要:
object-fit 一般用于 img 和 video 标签,一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。 值描述 fill 默认,不保证保持原有的比例,内容拉伸填充整个内容容器。 contain 保持原有尺寸比例。内容被缩放。 cover 保持原有尺寸比例。但部分内容可能被剪 阅读全文
摘要:
一、前端网络安全 二、其他攻击方式(主要针对后端和运维防护) csrf(跨站伪造) 攻击细节 跨站请求攻击,简单地说,是攻击者通过一些技术手段欺骗用户的浏览器去访问一个自己曾经认证过的网站并运行一些操作(如发邮件,发消息,甚至财产操作如转账和购买商品)。由于浏览器曾经认证过,所以被访问的网站会认为是 阅读全文
摘要:
对子元素设置margin-top会存在一种情况 给一个div内部的div设置一个margin-top,结果它的父级跟着它一起下移了 为什么会产生这样的效果呢?这要谈到css的盒模型margin的合并问题 所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为:同级或者 阅读全文
摘要:
pointer-events是css的属性 指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。 pointer-events属性有很多值,但是对于浏览器来说,只有auto和none两个值可用,其它的几个是针对SVG的(本身这个属性就来自于SVG技术)。 auto——效 阅读全文
摘要:
要使用 flexbox 布局,只需在父 HTML 元素上设置 display 属性 display: flex; 或者你可以以内联样式的显示 display: inline-flex; 当在父容器上设置了display: flex;或者display: inline-flex;后,它的子元素都自动变 阅读全文
摘要:
getBoundingClientRect 返回元素大小及相对可视区域的位置 兼容性: 由于兼容性问题,尽量仅使用 left, top, right, 和 bottom.属性是最安全的。 语法: Element.getBoundingClientRect() 返回值: 包含left, top, ri 阅读全文
摘要:
User Agent中文名为用户代理,简称 UA,它是一个特殊字符串头,使得服务器能够识别客户使用的操作系统及版本、CPU 类型、浏览器及版本、浏览器渲染引擎、浏览器语言、浏览器插件等。 深入了解https://www.cnblogs.com/hykun/p/Ua.html 标准格式为: 浏览器标识 阅读全文
摘要:
1.创建一个名字为rebase的js文件 #!/usr/bin/env node const path = require('path'); const chalk = require('chalk'); const shell = require('shelljs'); const inquire 阅读全文
摘要:
Vue源码中实现依赖收集(观察者模式),实现了三个类: Dep:扮演观察目标的角色,每一个数据都会有Dep类实例,它内部有个subs队列,subs就是subscribers的意思,保存着依赖本数据的观察者,当本数据变更时,调用dep.notify()通知观察者 Watcher:扮演观察者的角色,进行 阅读全文
摘要:
使用externals script放到body后面 路由懒加载使用import 开启gzip 将图片无损压缩后放到阿里云(oss)或者腾讯云(cos) 图片懒加载 封装组件 阅读全文