随笔分类 - 1.前端基础
摘要：前提 其实只有 <body>、<frame>、<iframe>、<img>、<link>、<script>、<style> 这些标签才有onload事件，而div、p等标签是没有的。 但如果我们还是想在div append到DOM时做一些事情该怎么办呢？有人会说那就在append到DOM的代码后面加
阅读全文
摘要：这些东西有些比较常用，有些仅知道个名称，但无论是熟悉还是陌生的，要比较精确地解释这些东西，是有一定的难度，可这些东西对前端开发非常重要，还是需要有明确的概念。 PS：内容点到即止，不然一个东西一篇文章都写不完。 整体认识 在学习方法上，对于互有联系的东西，有一个整体的印象，比起一个个琐碎的认识更为重
阅读全文
摘要：1、图片圆角显示 例如（非常简单）： HTML： CSS： 如果图片只为圆角，这种方式确实没问题，但如果还要加上居中的效果，这种方式就有问题，下面会说明。 2、图片居中显示（铺满父容器且不变形） 效果图如下： PS：为了实现上图居中的效果，单靠CSS是不行的，还需要JS处理。 例如： HTML： C
阅读全文
摘要：前因 今天检查一个vue页面问题，就是在切换Tab时候（某些win10电脑），页面会卡顿一段很长的时间，短则3秒，长则十几秒，这个体验非常糟糕，于是我着手寻找其中原因。 概况 这个vue页面的元素非常多，主要分为六个Tab内容，切换Tab也只是控制Tab内容的显隐。按道理这是非常简单的行为，不应该出
阅读全文
摘要：之前一直以为用background引入的图标无法染色（非字体图标），现在才知道有黑科技可以用，就是利用drop-shadow。 代码示例 效果 注意问题 1.使用after作为第二层标签的这种方式，可能会出现最后效果有些杂色。 这是因为after背景继承了父标签，然后以它为drop-shadow，这
阅读全文
摘要：连我自己把float和绝对定位，都称为脱离文档流，想想概念又不那么清晰，于是寻找了W3C资料来理解，才发觉不应该叫文档流。 资料 英文：https://www.w3.org/TR/CSS22/visuren.html#normal-flow 中文：http://w3help.org/zh-cn/kb
阅读全文
摘要：前言 页面显示到浏览器上的过程： 1.1、生成一个DOM树。 浏览器将获取到的HTML代码解析成1个DOM树，包含了所有标签，包括display:none和动态添加的节点。 1.2、生成样式结构体。 浏览器将所有样式解析成样式结构体，解析过程中会去掉浏览器不能识别的。 2、DOM树和样式结构体结合生
阅读全文
摘要：相同： 1、两者都能隐藏元素。 不同： 1、display:none 不占页面空间，visiblity:hidden 占据原先页面空间。 这里必须说明的是，元素不占页面空间后，取该元素或其内部元素的宽高值永远是0。如果想隐藏又想取到宽高值，那就得用visiblity:hidden。 2、displa
阅读全文
摘要：今天在使用鼠标事件时，用错了mouseout，于是做个测试总结。 结论： mouseenter：当鼠标移入某元素时触发。 mouseleave：当鼠标移出某元素时触发。 mouseover：当鼠标移入某元素时触发，移入和移出其子元素时也会触发。 mouseout：当鼠标移出某元素时触发，移入和移出其
阅读全文
摘要：结论 在我多番测试之后，才发现background-image使用svg，改变颜色根本做不了。 分析 当svg图片被使用成background-image，颜色的设置需要在svg内部才能生效。在外部CSS设置颜色样式，却是无效，这其实可以从CSS选择器得到解释，CSS选择器必须选择到DOM元素，而s
阅读全文
摘要：在某些情况下，textarea是不够用的，我们还需要显示一些图标或者高亮元素，这就需要用富文本编辑器，而富文本编辑器本质上是HTML元素设置了contenteditable。 然后可能需要像input、textarea有placeholder的输入提示语，但contenteditable的元素，pl
阅读全文
摘要：昨天写样式遇到个问题，如何让鼠标悬浮DIV后，显示DIV外的按钮，可以点击到按钮。 效果如下： 问题： 在DIV hover时候将按钮设为display: block，这是很直接的想法，但是这有个问题，就是在悬浮出现按钮后，鼠标要移到按钮上过程中，离开了DIV经过间距时，按钮就会消失。 解决办法：
阅读全文
摘要：今天需要将文本垂直居中，就是一行是垂直居中，多行也是垂直居中。 效果如下 实现代码（同事提供） 演示地址 http://htmlpreview.github.io/?https://github.com/codingforme/code-learn/blob/master/css-demo/mult
阅读全文
摘要：网上有很多浏览器并发连接数的表格数据，绝大多数是大同小异，都是下图统计，但总觉得人云亦云，缺少实际测试数据支持，并且还大不完整，例如缺少IE9/10/11、360之类的。 之所以谈及并发数这个问题，本质上是为了了解页面加载情况，做提高页面加载性能的参考依据。 但是在试图测试时，却有几个测试难点： 1
阅读全文
摘要：网上有很多资料说明这个，但都很长的，觉得东西太多也记不住，就记点东西，权当笔记。 HTTP 超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。 HTTP报文由从客户
阅读全文
摘要：在不知道什么时候，突然有人提起前端工程化这东西，一开始觉得又是某个大神故意提起的高深词汇，专门来吓唬人的。 继而我疯狂查找了很多的资料，在接近二十篇的相关资料，每一篇文章都写得神乎其神，大有唯我独尊的意味，但每篇看下来，总感觉不对经——就是大家都把自己一套比较规范的开发套路充当出前端工程化，前端工程
阅读全文
摘要：前言 这几天有个需求，需要在IE上启动本地程序，就如下面一样。 一开始，我还以为IE有提供特殊的接口，类似上图中的“RunExe”，可以找了大半天觉得不对经（找不到该方法）。 后来想想不对，这种方式是ActiveX控件。 ActiveX控件基本概念 ActiveX控件可以看作是一个极小的服务器应用程
阅读全文
摘要：今天整理出在Web前端导出Excel的写法，写了一个工具类，对各个浏览器进行了兼容。 首先，导出的数据来源可能有两种： 1. 页面的HTML内容（一般是table） 2. 纯数据 PS：不同的数据源，导出的写法也是不相同的。 技术方案 IE 无论数据来源是哪里，都是用ActiveXObject对象及
阅读全文
摘要：JSON.parse与eval和能将一个字符串解析成一个JSON对象，但还是有挺大区别。 测试代码 JSON.parse执行： 例：JSON.parse(A); A、B、C、G都不可转，D、E、F都可以。 eval执行： 例：eval("("+A+")"); A到G都可以转，特别到G时，页面还跳转到
阅读全文
摘要：动画原理 SVG动画，就是元素的属性值关于时间的变化。 如下图来说，元素的某个属性值的起始值（from）到结束值（to）在一个时间段（duration）根据时间函数（timing-function）计算出每一帧（frame）的插值（interpolation）作为变换的行为。 PS：SVG动画是帧动
阅读全文