8 陈聪

百世 - 前端工程师

我要认证

热爱生活与技术,偏于前端,潜心学习,乐于分享

等级
TA的排名 1w+

CSS3中的calc()函数以及在less中的使用

1. calc()函数在css3中我们可以通过calc()函数来动态计算长度值,如:#div { width: calc(100% - 100px);}它的语法是calc(expression)expression参数是必须的,它是一个数学表达式,结果将采用运算后的返回值。使用calc() 函数时需要注意的点:运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);任何长度值都可以使用calc()函数进行计算calc()函数支持"+", "-"

2020-08-07 21:39:19

页面滚动到顶部

function scrollToTop() { const c = document.documentElement.scrollTop || document.body.scrollTop; if (c > 0) { window.requestAnimationFrame(scrollToTop); window.scrollTo(0, c - c / 8); }}

2020-07-16 14:50:14

VS Code保存文件时自动删除行尾空格

操作如下:同时按下Ctrl键、 ,键(或者:菜单栏的文件=>首选项=>设置)弹出设置页面,在输入框中输入files.trimTrailingWhitespace,打勾选中,即可使VS Code在保存文件时自动删除行尾空格强迫症的福音。...

2020-07-03 10:00:53

你不知道的 Blob

你不知道的 Blob一、Blob 是什么二、Blob API 简介2.1 构造函数2.2 属性2.3 方法三、Blob 使用场景3.1 分片上传3.2 从互联网下载数据3.3 Blob 用作 URL3.4 Blob 转换为 Base643.5 图片压缩3.6 生成 PDF 文档四、Blob 与 ArrayBuffer 的区别4.1 Blob vs ArrayBuffer五、参考资源如果你允许用户从你的网站上下载某些文件,那你可能会遇到 Blob 类型。为了实现上述的功能,你可以很容易从网上找到相关的示例,

2020-06-27 11:26:31

浮动元素的位置,只参考前一个元素的位置即可

如下图,1、2、3三个元素左浮动,虚线为父容器,此时再添加一个左浮动的元素4,总宽度超出了父元素宽度,那么4号元素的位置应该是这样的?它的位置不是A也不是B:浮动元素的位置,其实只参考前一个元素的位置即可。所以元素4的位置只需考虑元素3的位置即可,如下:我们换一下位置,同理可以得到如下结果(只需考虑元素1的位置):float属性会导致父元素的高度塌陷,解决方法可查看:CSS float浮动规则以及父元素高度塌陷的解决方法...

2020-05-31 12:51:14

前端很容易遇到的一个大坑

前端开发时,我们经常会通过.操作符来获取属性值,这里有一个很容易。比如,后端接口定义中data字段类型为数组,

2020-05-25 19:51:15

JSON.stringify() 的 5 个秘密特性

JSON.stringify() 方法能将一个 JavaScript 对象或值转换成一个 JSON 字符串作为一名 JavaScript 开发人员,JSON.stringify()是用于调试的最常见函数。但是它的作用是什么呢,难道我们不能使用 console.log()来做同样的事情吗?让我们试一试。//初始化一个 user 对象const user = { "name" : "Prat...

2020-04-01 20:47:12

JS实现判断栈的压入、弹出序列

作为前端,接触算法的机会可能比较少,但是我们脑子可不能锈了~一道题目:输入两个整数序列,第一个序列表示栈的压入顺序,判断第二个序列是否为该栈的弹出顺序。假设压入栈的所有数字均不相等。例如:1,2,3,4,5是某个栈的压入顺序,序列4,5,3,2,1是该栈对应的一个弹出序列,但4,3,5,1,2就不可能是该压栈序列的弹出序列。这里,我用JS来实现这道题,其中用数组来模拟栈的操作。主要思路就是:...

2020-03-29 21:52:53

微信小程序获取自定义元素的宽高、使用”事件穿透”来达到状态同步的效果

微信小程序获取元素宽高的方式:// 自定义组件需要用:this.createSelectorQuery()const query = wx.createSelectorQuery()query.select('.my-class').boundingClientRect(res => { this.setData({ itemHeight: res.height, itemW...

2020-03-28 20:04:54

React请求数据的一种优化思路

文章目录1. 前期:分散开发时的阶段2.中期:统一的阶段3. 后期:单次访问只发起1次请求大家在网购或者寄快递时,应该都有碰到地址选择栏,也就是选择省市区。我在开发一个国外快递官网的时候也遇到了这个需求,在这个项目中,由于国外业务刚展开,并不是所有区域都可选的,需要人工维护这份数据(时常会改动),所以地址信息是由后端维护的,当前端页面遇到需输入地址的地方,就向后端发起地址数据的请求。在这,我记...

2020-03-17 21:27:12

纯CSS实现气泡框

文章目录用CSS画三角形气泡框正三角形的气泡框斜三角形的气泡框总结在工作中,我们可能会遇到气泡框相关的需求,如下图:这个气泡框我们可以使用纯CSS代码来实现。接下来跟我一起一步步实现吧!用CSS画三角形用CSS画个三角形,相信大家都很熟悉了吧。主要思路:将元素的的宽高设置为0;然后设置相应的边框即可实现。详细来讲就是给某一方向的边框添加宽度以及颜色,然后将其旁边两个方向(或一个)的...

2020-03-16 20:33:52

HTTP的前世今生

文章目录HTTP 0.9 / 1.0HTTP/1.1HTTP/2HTTP/3本文转载自:HTTP的前世今生HTTP (Hypertext transfer protocol) 翻译成中文是超文本传输协议,是互联网上重要的一个协议,由欧洲核子研究委员会CERN的英国工程师 Tim Berners-Lee发明的,同时,他也是WWW的发明人,最初的主要是用于传递通过HTML封装过的数据。在1991年...

2020-02-29 19:25:01

获取项目(文件夹)的树形结构

在写项目文档的时候,有时我们想要对项目的结构进行说明,当然我们是不可能手动来写文件结构的,在windows系统下,有一个tree命令可以帮我们生成对应的树结构。使用方式如下:我们只要在命令提示符(CMD)中进去到你想要生成的树结构的文件夹,然后直接输入tree回车即可:这里只显示文件夹的路径,如果还想要显示文件夹中的文件,则输入tree /f即可:当然,如果我们想要将结果保存到一个文件中...

2020-02-04 20:43:16

display: none、visibility: hidden与opacity: 0的区别

文章目录1. display: none、visibility: hidden与opacity: 0的区别2. 补充:其他隐藏元素的方法1. display: none、visibility: hidden与opacity: 0的区别display: none、visibility: hidden与opacity: 0都可以让元素隐藏,它们之间的区别见下表:特性(行为)displa...

2020-01-21 14:31:39

Node读写Excel文件(txt文件)

文章目录读取txt文件的内容写入txt文件读取Excel文件前端有时要处理一些数据(比如多语言文件内容的替换),我们不要傻乎乎地干这种重复枯燥又浪费时间的ctrl C+ ctrl V的工作,这种事情交给计算机做再合适不过了。这篇文章只是简单地介绍前端如何通过Node来读取Excel或txt文件中的数据,然后写入到txt文件中的方法。首先给出文件的内容:test.txt文件只有一句话(我是txt...

2020-01-14 22:46:30

如何撤销 Git 操作?

文章目录1.撤销提交2.丢弃提交3.替换上一次提交4.撤销工作区的文件修改5.从暂存区撤销文件6.撤销当前分支的变化本文转载自阮一峰的博客:如何撤销 Git 操作?Git 版本管理时,往往需要撤销某些操作。本文介绍几种最主要的情况,给出详细的解释。更多的命令可以参考《常用 Git 命令清单》一文。1.撤销提交一种常见的场景是,提交代码以后,你突然意识到这个提交有问题,应该撤销掉,这时执行下...

2020-01-13 14:38:15

常用 Git 命令清单

文章目录1.新建代码库2.配置3.增加/删除文件4.代码提交5.分支6.标签7.查看信息8.远程同步9.撤销10.其他关于git相关操作的教学文章多如牛毛,我也就不再赘述了,本文转载自:常用 Git 命令清单一般来说,日常使用只要记住下图6个命令(感觉这个图非常有助于记忆),就可以了。但是熟练使用,恐怕要记住60~100个命令。几个专用名词的译名如下:Workspace:工作区Ind...

2020-01-13 14:04:51

避免在移动端页面中使用100vh

100vh带来的问题在CSS中,视口单位(Viewport units)听起来不错。如果要设置一个元素的样式使它占据整个屏幕的高度,那么你可以设置height: 100vh,这样你就拥有一个完美的全屏元素,该元素会随着视口的变化而调整大小!可惜的是,事实并非如此。100vh在移动浏览器中以一种微妙但基本的方式被破坏,使其几乎无用。最好避免使用100vh,而应该通过javascript设置高度的方...

2019-12-06 18:29:35

ERROR in app.bundle.js from UglifyJs Unexpected token: name «element», expected: punc «;» 的错误处理

遇到问题webpack打包时使用UglifyJs(github地址)来压缩美化JS代码,在npm run build时报错了:// webpack.prod.js 内容const merge = require('webpack-merge')const UglifyJSPlugin = require('uglifyjs-webpack-plugin')const common = r...

2019-11-26 14:25:33

TypeError: CleanWebpackPlugin is not a constructor 的错误处理

遇到问题按照webpack官网的教程进行学习时,安装clean-webpack-plugin插件后(版本为:"^3.0.0"),再build时,发现报错了,配置如下:const CleanWebpackPlugin = require('clean-webpack-plugin')module.exports = { ... plugins: [ new C...

2019-11-25 15:54:36

查看更多

CSDN身份
  • 博客专家
勋章 我的勋章
  • 领英
    领英
    绑定领英第三方账户获取
  • GitHub
    GitHub
    绑定GitHub第三方账户获取
  • 脉脉勋章
    脉脉勋章
    绑定脉脉第三方账户获得
  • 签到王者
    签到王者
    累计签到获取,不积跬步,无以至千里,继续坚持!
  • 技术圈认证(专家版)
    技术圈认证(专家版)
    博客专家完成年度认证,即可获得
  • 阅读者勋章Lv2
    阅读者勋章Lv2
    授予在CSDN APP累计阅读博文达到7天的你,是你的坚持与努力,使你超越了昨天的自己。
  • 专栏达人
    专栏达人
    授予成功创建个人博客专栏的用户。专栏中添加五篇以上博文即可点亮!撰写博客专栏浓缩技术精华,专栏达人就是你!
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 1024勋章
    1024勋章
    #1024程序员节#活动勋章,当日发布原创博客即可获得
  • 勤写标兵Lv1
    勤写标兵Lv1
    授予每个自然周发布1篇到3篇原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。
  • 分享达人
    分享达人
    成功上传6个资源即可获取