初识前端
关注
分享
扫一扫
低调奋进
这个作者很懒，什么都没留下…
展开
-
同时使用浮动和定位
当在同一个元素中同时使用浮动和定位时，分情况讨论：1.当定位为absolute或fixed时，float不生效2.若定位不是absolute和fixed时，两个同时起作用，且float的优先级更高。原创 2021-03-10 10:50:24 · 1088 阅读 · 0 评论 -
Array.prototype.forEach.call()和document.documentElement
因为document.querySelectorAll()返回的并不是我们想当然的数组，而是NodeList，对NodeList，它里面没有.forEach方法，我们使用了这样的方法进行循环：var divs = document.querySelectorAll('div');[].forEach.call(divs, function(div) { // do whatever div.style.color = "red";});document.bod...原创 2021-03-06 17:58:00 · 836 阅读 · 0 评论 -
前端编码规范分享
小贴士这里插入一些小贴示，大家可以注意到我们组件的命名和方法的摆放顺序其实有一定的讲究，这里可以简单分享一下个人的习惯，仅供参考。组件的私有方法都用_开头，所有事件监听的方法都用handle开头。把事件监听方法传给组件的时候，属性名用on开头。例如：<CommentInput onSubmit={this.handleSubmitComment.bind(this)} />这样统一规范处理事件命名会给我们带来语义化组件的好处，监听（on）CommentInp...翻译 2020-12-25 13:41:49 · 144 阅读 · 0 评论 -
template标签和iframe
背景：如果页面加载了iframe，在src不变的情况下，一般是不会重新载入iframe的内容的。但如果在<template></template>内部使用了iframe，那每次激活<template>时，iframe就会重新加载。这本质上是<template>的特性。介绍如下：<template>元素，用于描述一个标准的以 DOM 为基础的方案来实现客户端模板。该模板允许你定义一段可以被转为 HTML 的标记，在页面加载时不生效，但可.转载 2020-05-26 13:44:57 · 696 阅读 · 0 评论 -
一种自动化生成骨架屏的方案
大家好，我今天分享的主题是：「一种自动化生成骨架屏的方案」。在分享之前，先自我介绍下，我叫罗冉，GitHub 账号是@Jocs。第一份工作是在欧莱雅做化妆品研发，2015年转行，目前是饿了么的一名前端工程师，主要工作是研究前端加载性能及运行时性能优化。在工作之余，开发一款叫做@marktext的 Markdown 编辑器。今天的分享主要分为三个部分： 首屏加载状态演进 如何构建骨架屏 将骨架屏打包的项目中 首屏加载的演进我们先来看一些权威机构所做的研究报告。..转载 2020-05-11 10:24:37 · 457 阅读 · 0 评论 -
什么是 BFC、IFC、GFC 和 FFC
What's FC？一定不是KFC，FC的全称是：Formatting Contexts，是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。BFCBFC(Block Formatting Contexts)直译为"块级格式化上下文"。Block Formatting Contexts就是页面上的...转载 2020-04-28 09:57:32 · 640 阅读 · 0 评论 -
cursor: not-allowed和 pointer-events: none
cursor: not-allowed;鼠标样式为 禁用图标pointer-events: auto; 效果和没有设置pointer-events属性相同；点击后不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。pointer-events: none；元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以...原创 2020-03-04 21:41:59 · 3739 阅读 · 4 评论 -
10 分钟理解 BFC 原理
一、常见定位方案在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案:普通流 (normal flow)在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTM...转载 2019-04-25 09:41:20 · 155 阅读 · 0 评论 -
学习HTML5 Canvas这一篇文章就够了
https://blog.youkuaiyun.com/u012468376/article/details/73350998转载 2019-05-08 11:28:17 · 288 阅读 · 0 评论 -
html5笔记
针对IE浏览器html5shiv 是比较好的解决方案。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。html5shiv.js 引用代码必须放在 <head> 元素中，因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。...原创 2019-05-09 16:25:09 · 123 阅读 · 0 评论 -
2019 前端面试 | 知其然，并知其所以然
本文推荐 PC 端阅读~本文版权归 “公众号 | 前端一万小时” 所有，侵删！复制代码转载 2019-05-23 17:10:24 · 345 阅读 · 0 评论 -
面试官(6): 写过『通用前端组件』吗?
https://juejin.im/post/5c02142fe51d4511be77aad7转载 2019-05-23 17:13:12 · 1365 阅读 · 0 评论 -
CSS规范
用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。 为选择器分组时，将单独的选择器单独放在一行。 为了代码的易读性，在每个声明块的左花括号前添加一个空格。 声明块的右花括号应当单独成行。 每条声明语句的:后应该插入一个空格。 为了获得更准确的错误报告，每条声明都应该独占一行。 所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是...转载 2019-06-26 10:13:32 · 148 阅读 · 0 评论 -
网页显示中文乱码问题
今天遇到一个奇怪的问题，别的界面中文显示正常，新写的一个界面，中文显示就是乱码，检查了html的声明utf-8也没问题，经过排查，是本地的文件编辑器编辑文件格式的问题，编辑器文件格式改为utf-8就ok了。...原创 2019-07-15 15:15:59 · 327 阅读 · 0 评论 -
html/css基础篇——DOM中关于脱离文档流的几种情况分析
所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。脱离文档流即是元素打乱了这个排列，或是从排版中拿走。 当前所知的脱离文档流的方式有两种：浮动和定位。 a.定位属性positon 先看一下定位。看一段对定位各个字段的描述，有助于理解值 描述 absolute ...转载 2019-04-24 09:11:28 · 409 阅读 · 0 评论 -
html+css日常笔记1
一、语义化，让你的网页更好的被搜索引擎理解标签的用途：我们学习网页制作时，常常会听到一个词，语义化。那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用 em 标签表示强调等等。语义化的好处：1....原创 2019-04-23 17:31:56 · 210 阅读 · 0 评论 -
css3日常笔记1
在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，虽然目前较新版本的浏览器都是不需要前缀的，但为了更好的向前兼容前缀还是少不了的。 前缀 浏览器 -webkit chrome和safari -moz firef...原创 2019-04-27 17:27:45 · 218 阅读 · 0 评论 -
回调函数打开模态框
//回调函数打开模态框，利用这个方法 @ViewChild('contentNew') contentNewRef: TemplateRef<any>;原创 2018-09-06 14:19:03 · 892 阅读 · 1 评论 -
利用html5 file api读取本地文件（如图片、PDF等）
在html4的年代，我们如果要在网页上呈现一张用户本地的图片，需要用户先把图片上传到服务器，再根据服务器提供的图片地址把图片下载下来，才能把图片在网页上呈现出来。这一来二往，起码已经费了两倍于这张图片的流量了，更别说服务器为了存储这张图片所花费的资源以及用户上传错了图片的冤枉成本（因为在html4时代，用户选择好图片后，往往只能看到图片的文件名，而无法通过预览图来进一步确认这张图片是否就是自己想要...转载 2018-09-13 09:17:25 · 1061 阅读 · 0 评论 -
input type file onchange上传文件的过程中，遇到同一个文件二次上传无效的问题。
input type file onchange上传文件的过程中，遇到同一个文件二次上传无效的问题。 不要采用删除当前input[type=file]这个节点，然后再重新创建dom这种方案，这样是不合理的。解释如下：input[type=file]使用的是onchange去做，onchange监听的为input的value值，只有再内容发生改变的时候去触发，而value在上传文件的时...转载 2018-09-14 09:55:51 · 369 阅读 · 0 评论 -
css小记
1.设置绝对位置position:absolute;这2个不可少：left:px;top:px;2.垂直居中几种方式，其中之一，"vertical-align":"middle"生效的前提是设置display属性，例如："display": "table-cell"...原创 2018-11-05 11:24:01 · 144 阅读 · 0 评论 -
nginx本地起服务反向代理pass环境操作
步骤一：先在conf文件夹中找到nginx.conf，修改2个相关配置upstream ms-cc {server 10.8.62.218:28001;#10.8.62.218为pass环境的ip} upstream mine { server 10.8.20.38:4200; #10.8.20.38为本机ip地址 }注意：nginx.conf中...原创 2019-03-08 16:44:31 · 529 阅读 · 0 评论 -
this.http.post()参数注意
第一个参数是url,第二个参数是body，body为object，如果body为空的时候，参数填{}；this.http.post('url' + id, {}).subscribe(res => {}, error => {})原创 2019-03-14 09:43:26 · 10680 阅读 · 0 评论 -
日常bug
1.回调函数返回值问题在递归函数从数组中中取出指定的数据时 ，return 返回的值除了第一层之外总是 undefind在递归调用时加return ; 因为 return 第一次返回时只是结束当前的方法,return 后,后面的递归其实会接着走,所以给递归函数一个return就行. public leafId2Region(nodeId: any, regionList: any)...原创 2019-03-26 19:52:59 · 137 阅读 · 0 评论 -
URI和URL的区别
简单理解是这样的：理解URI和URL的区别，我们引入URN这个概念。URI = Universal Resource Identifier 统一资源标志符URL = Universal Resource Locator 统一资源定位符URN = Universal Resource Name 统一资源名称这三者的关系如下图：也就是说，URI分为三种，URL or URN or （UR...转载 2019-03-28 15:43:01 · 229 阅读 · 0 评论 -
一个bug的思考---前端URI编解码
bug描述：angular项目中路由跳转的时候，路由传参出现问题假设，路由定义如下：{path: 'update/:name',component: PropertyComponent}跳转：this.router.navigateByUrl("update/name")name是需要传的参数，问题就出在name的取值上，如果name="xiaoming"没有问题，...原创 2019-03-29 10:36:01 · 252 阅读 · 0 评论 -
圣杯布局和双飞翼布局的理解与思考
圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。圣杯布局与双飞翼布局圣杯布局来源于文章In Search of the Holy Grail，而双飞翼布局来源于淘宝UED。虽然两者的实现方法略有差异，不过都遵循了以下要点：两侧宽度固定，中间宽度自适应 中间部分在DOM结构上优先，以便先行渲染...转载 2019-04-25 20:04:22 · 230 阅读 · 0 评论 -
2018大厂高级前端面试题汇总
转自：https://juejin.im/post/5bc92e9ce51d450e8e777136每日面试题：https://github.com/Advanced-Frontend/Daily-Interview-Question本人于7-8月开始准备面试，过五关斩六将，最终抱得网易归，深深感受到高级前端面试的套路。以下是自己整理的面试题汇总，不敢藏私，统统贡献出来。面试的公司分别...转载 2019-04-22 09:48:20 · 242 阅读 · 0 评论 -
TCP三次握手和四次挥手以及11种状态
来自51CTO博客作者@IT_外卖小哥的原创作品1、三次握手置位概念：根据TCP的包头字段，存在3个重要的标识ACK、SYN、FINACK：表示验证字段SYN：位数置1，表示建立TCP连接FIN：位数置1，表示断开TCP连接三次握手过程说明：1、由客户端发送建立TCP连接的请求报文，其中报文中包含seq序列号，是由发送端随机生成的，并且将报文中的SYN字段置为1，...转载 2019-04-22 19:36:25 · 146 阅读 · 0 评论 -
CSS中*和body有什么区别
转自：http://www.softwhy.com/forum.php?mod=viewthread&tid=4758CSS中*和body有什么区别:建议:尽可能的手写代码，可以有效的提高学习效率和深度。在介绍它们两个我们首先应该知道这两个符号在CSS文件中充当的是什么角色。在CSS文件中*是通配符选择器，它可以选择文档中所有的元素，也就是说是一个通杀选择器。body是一个普通的...转载 2019-04-23 10:41:52 · 1131 阅读 · 0 评论 -
这个背景怎么实现的？
http://www.makaidong.com/Web%E5%89%8D%E7%AB%AF1/174694.shtml转载 2017-10-27 09:08:14 · 257 阅读 · 0 评论