随笔分类 -  HTML5/CSS3

ES5 map循环一大坑：循环遍历竟然出现逗号！
摘要：一、map map大法好 这里需要解释一下 和`forEach`的区别 一般来说需要返回值时使用 ，而只需要循环的使用 map循环常用的一些方法 但 循环有一坑爹之处... 当用map循环遍历元素的时候, 会出现多余的逗号 ！ 虽然对于单页面应用开发基本遇不上. 但还是做一个记录.防止日后落坑 二、 阅读全文
posted @ 2018-11-02 22:11 xiaobe 阅读(4297) 评论(18) 推荐(1) 编辑
整理前端路上收藏的珍品！
摘要：一、Halloween Happy！ 万圣节, 是否已经按耐不住自己内心的小恶魔, 想早点下班狂欢！别着急, 上班族的摸鱼好朋友Google Doodles今天又给我们推了几款'上班摸鱼'的万圣节游戏.玩起来, 时间简直不要过得飞快。 《doodles》 二、前端资源汇总 简介 玩够了就该回来学习啦 阅读全文
posted @ 2018-10-31 23:27 xiaobe 阅读(936) 评论(0) 推荐(3) 编辑
要想成为前端大神，那些你不得不知晓的web前端命名规范。
摘要：一、Web语义化 1.1 H5的语义化 对于经验资深的前端er，在给web布局时，相信都会很注重标签和命名的规范。尤其是随着html5的普及发展，更是把web前端语义化推向一个新的台阶上。比如html5给我们新增的语义标签：header、nav、main、aside、footer、section、a 阅读全文
posted @ 2018-10-28 17:02 xiaobe 阅读(4109) 评论(0) 推荐(2) 编辑
ES6 常用总结(前端开发js技术进阶提升总结）
摘要：一、变量声明const和let 在ES6之前，我们都是用var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数的最顶部就在全局作用域的最顶部)。这就是函数变量提升例如： 不用关心bool是否为true or false。实际上，无论如何str都会被创建声明。(如果未声明,返回的 阅读全文
posted @ 2018-10-22 21:23 xiaobe 阅读(8874) 评论(4) 推荐(0) 编辑
JS快速构建数组方法
摘要：一、常用(普通)数组的构建 1.1 直接构建 1.2 通过new Array 二、特殊数组的构建 2.1 构建相同内容的数组 直接构建法: 简单粗暴不推荐,如果数据多,不仅构建麻烦,而且不美观 循环法: for循环 比第一种要好,但是代码依然不美观 let newArr = new Array(3) 阅读全文
posted @ 2018-10-19 11:10 xiaobe 阅读(9945) 评论(10) 推荐(0) 编辑
JQ遇到$(‘.xxx’).attr(‘display’)一直返回undefined
摘要：jq attr && jq css 1.1 attr() 方法设置或返回被选元素的属性值 我们就题目遇到的问题做一个测试 猜一下结果? 注意要把script放在html后,或者加上 可以看到css样式 为undefined,而标签属性 却拿到了值。 从而可以解释,$.attr()封装了原生attri 阅读全文
posted @ 2018-10-16 10:18 xiaobe 阅读(1277) 评论(0) 推荐(0) 编辑
SPA中,Node路由优先级高于React路由
摘要：一、问题描述 在一场面试中,面试官问到了React和Node路由之间的关系. 现在SPA(单页面应用)的使用越来越广。 Node(后台)和React(前端)都有自己的路由,当我页面访问一个URL的时候,其中的路由究竟是以哪个为准呢? 答案是Node路由优先级更高 所以会经常出现React设置了Rou 阅读全文
posted @ 2018-10-14 17:04 xiaobe 阅读(1142) 评论(0) 推荐(0) 编辑
编写灵活、稳定、高质量的前端代码的规范二（推荐收藏）
摘要：编写灵活、稳定、高质量的HTML代码的规范二 一、代码组织 1.1 注意 （1）以组件为单位组织代码段。 （2）制定一致的注释规范。 （3）使用一致的空白符将代码分隔成块，这样利于扫描较大的文档。 （4）如果使用了多个 CSS 文件，将其按照组件而非页面的形式分拆，因为页面会被重组，而组件只会被移动 阅读全文
posted @ 2018-10-05 15:07 xiaobe 阅读(695) 评论(0) 推荐(0) 编辑
编写灵活、稳定、高质量的前端代码的规范一（推荐收藏）
摘要：编写灵活、稳定、高质量的HTML代码的规范 虽然现在前端很多都已经成为SPA(单页面应用)开发,或许连渲染的html都是自动生成的.但是归根结底,还是html和css,必要时候我们还是需要好好了解这些基础的开发规范 当然这都是基础性的规范,和公司规范的并不冲突.你也可以当作课外知识阅读～ 一、唯一定 阅读全文
posted @ 2018-10-04 22:53 xiaobe 阅读(470) 评论(0) 推荐(0) 编辑
每日质量NPM包拖拽文件上传_react-dropzone
摘要：一、react dropzone 官方定义: Simple HTML5 compliant drag'n'drop zone for files built with React.js. 理解: 一个为react量身定制,基于H5 API: 可以实现拖拽上传文件的npm插件包 是的,以后再也不用自己 阅读全文
posted @ 2018-10-01 17:22 xiaobe 阅读(2789) 评论(0) 推荐(0) 编辑
一行css解决图片统一大小后的拉伸问题(被冷漠的object-fit)
摘要：一、先来个实战 1. 测试案例 需求: 要求表情库里所有表情包大小都固定 实际效果: 由于图片原始大小都不一样,强行设定大小值会导致拉伸,如果不设定大小则参差不齐。例如: 2. 解决方法 大多数都是利用 来避免对图片造成的压缩或者拉伸。 小巧而强大的object fit object fit似乎是被 阅读全文
posted @ 2018-09-13 15:22 xiaobe 阅读(32538) 评论(2) 推荐(7) 编辑
前端常见的布局方案大全
摘要：一、静态布局(Static Layout) 1. 布局概念 最传统、原始的Web布局设计。网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow:scroll)来实现滚动查阅。 2. 优点 采用的是css2之前的写法,不存在浏览器兼容性。布局简单 阅读全文
posted @ 2018-09-05 21:21 xiaobe 阅读(50574) 评论(1) 推荐(5) 编辑
CSS垂直居中查询宝典
摘要：一、垂直居中的用处 1. 设计稿需求 当我们抱怨设计反复不定的时候,试着理解一下。每一位开发者也会是一位用户,请多多用'用户'的角色去开发。就比如下面这图,你会更稀饭哪种格式呢？ 如果我们使用一个webapp,连底部icon基本的水平垂直居中都没完成,我们可能会非常失望,即使功能很亮眼。所以对待好每 阅读全文
posted @ 2018-09-01 19:31 xiaobe 阅读(553) 评论(0) 推荐(0) 编辑
前端简单实现校招笔试'作弊监听'功能
摘要：一、 监听你的页面活动 最近校招笔试如火如荼地开展。各种小心思都浮上来了:"我就查一道".小心翼翼按了一下tab切换(mac用三爪), 开始工作了."监测到你切换页面,超过xx次将影响你的成绩(希望你自重)" 二、 visibilityState 值 | 描述 | : : visible | 此时页 阅读全文
posted @ 2018-08-28 18:35 xiaobe 阅读(3721) 评论(0) 推荐(0) 编辑
深究CSS中Position的属性和特性
摘要：一、position的概念 作为布局必不可缺少的元素之一,深究其属性以及一些注意点是非常必要的。 定义:规定元素的定位类型。 position属性: 属性 | 描述 | 常用性 | : : | : absolute | 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。| ★★ 阅读全文
posted @ 2018-08-26 19:56 xiaobe 阅读(3603) 评论(0) 推荐(0) 编辑
Chrome,你这坑人的默认非安全端口
摘要：今天用chrome打开页面的发现一个错误: ERR_UNSAFE_PORT 字面意思是error:不安全端口。 一、什么是默认非安全端口?    每个浏览器出于安全问题,都会禁止一些网络浏览以外的端口。因为不清楚这个机制,我用node开启的6000服务根本无法访问,调试 阅读全文
posted @ 2018-08-20 20:10 xiaobe 阅读(18600) 评论(0) 推荐(2) 编辑
CSS3动画详解(结合实例)
摘要：一、使用CSS3动画代替JS动画 JS动画频繁操作DOM导致效率非常低 在频繁的操作DOM和CSS时，浏览器会不停的执行重排（reflow）和重绘（repaint） 可以避免占用JS主线程 这边就不细说这两者具体的低优缺点。一般做2D动画的话,可以使用CSS3的transition或animatio 阅读全文
posted @ 2018-08-03 11:23 xiaobe 阅读(1105) 评论(1) 推荐(1) 编辑