随笔分类 - 前端经验
摘要：我们都知道需要给html和body标签设置了高度height:100%之后，再给内部的div设置height:100%的时候，内部div的高度100%才会起到作用。这是由于：%是一个相对父元素计算得来的高度，要想使他有效，我们需要设置父元素的height。解决如下： 1 html,body{ 2 h
阅读全文
posted @ 2020-06-08 16:43
前端一点红
摘要：一、基本概念 刷新 QQ 空间动态时，发现一则广告，随着用户上下滑动动态列表，就会自动切换广告图片，这样的效果对移动端本就不大的屏幕来说，无疑是很精妙的考虑，这样的效果是怎么实现的呢？ 你可以点击这里：QQ空间广告示意demo 接下来就说说这个效果的具体实现思路： 将两张图片通过定位，相对于图片容器
阅读全文
posted @ 2020-06-08 16:37
前端一点红
摘要：使用技巧会让人变的越来越懒，没错，我就是想让你变懒。下面是我收集的CSS高级技巧，希望你懒出境界。 1. 黑白图像 这段代码会让你的彩色照片显示为黑白照片，是不是很酷？ 1 img.desaturate { 2 filter: grayscale(100%); 3 -webkit-filter: g
阅读全文
posted @ 2020-06-02 12:36
前端一点红
摘要：在h1标签中，新增span标签来保存标题内容，然后将其样式设置为display:none <style> h1 { width: 64px; height: 64px; background: url(); font: 12px/1 '微软雅黑'; } span { display: none; }
阅读全文
posted @ 2020-06-02 11:19
前端一点红
摘要：序 display有几种属性：inline是内联对象，比如<a/> 、 <span/>标签等，可以“堆在一起”显示，宽高由内容决定，不能设置；block是块对象，比如<div/>、<p/>标签等，要占一整行，但是宽高可以自定义；为了弥补inline和block的不足，又扩充了inline-block
阅读全文
posted @ 2020-06-02 11:06
前端一点红
摘要：最近在做公司内部的一个的一个SDK的重构，这里总结一些经验分享给大家。 类型检查和智能提示 作为一个SDK，我们的目标是让使用者能够减少查看文档的时间，所以我们需要提供一些类型的检查和智能提示，一般我们的做法是提供JsDoc，大部分编辑器可以提供快捷生成JsDoc的方式，我们比较常用的vscode可
阅读全文
posted @ 2020-06-02 11:02
前端一点红
摘要：场景概述 弹窗是一种常见的交互方式，而蒙层是弹窗必不可少的元素，用于隔断页面与弹窗区块，暂时阻断页面的交互。但是，在蒙层元素中滑动的时候，滑到内容的尽头时，再继续滑动，蒙层底部的页面会开始滚动，显然这不是我们想要的效果，因此需要阻止这种行为。 那么，如何阻止呢？请看以下分析： 方案分析 方案一 打开
阅读全文
posted @ 2020-06-02 10:53
前端一点红
摘要：1. 前言 随着互联网的高速发展，前端页面的展示、交互体验越来越灵活、炫丽，响应体验也要求越来越高，后端服务的高并发、高可用、高性能、高扩展等特性的要求也愈加苛刻，从而导致前后端研发各自专注于自己擅长的领域深耕细作。 然而带来的另一个问题：前后端的对接界面双方却关注甚少，没有任何接口约定规范情况下各
阅读全文
posted @ 2020-06-02 10:50
前端一点红
摘要：PC端上传文件多半用插件，引入flash都没关系，但是移动端要是还用各种冗余的插件估计得被喷死，项目里面需要做图片上传的功能，既然H5已经有相关的接口且兼容性良好，当然优先考虑用H5来实现。 JS代码： <script type="text/javascript"> function fileSel
阅读全文
posted @ 2020-06-02 10:46
前端一点红
摘要：浏览器缓存 浏览器缓存是浏览器在本地磁盘对用户最近请求过的文档进行存储，当访问者再次访问同一页面时，浏览器就可以直接从本地磁盘加载文档。 所以根据上面的特点，浏览器缓存有下面的优点： 减少冗余的数据传输 减少服务器负担 加快客户端加载网页的速度 浏览器缓存是Web性能优化的重要方式。那么浏览器缓存的
阅读全文
posted @ 2020-05-23 18:26
前端一点红
摘要：在网页开发中经常会有交互操作，比如点击一个dom元素，需要让js对该操作做出相应的响应，这就需要对Dom元素进行事件绑定来进行处理，js通常有三种常用的方法进行事件绑定：在DOM元素中直接绑定；在JavaScript代码中绑定；绑定事件监听函数。 直接在DOM元素绑定事件 1 <div id="bt
阅读全文
posted @ 2020-05-23 16:55
前端一点红
摘要：如果您正在测试前端应用程序，则应该了解前端测试金字塔。 在本文中，我们将看到前端测试金字塔是什么，以及如何使用它来创建全面的测试套件。前端测试金字塔前端测试金字塔是一个前端测试套件应该如何构建的结构化表示。 理想的测试套件由单元测试，一些快照测试和一些端到端（e2e）测试组成。 这是 测试金字塔的改
阅读全文
posted @ 2020-05-23 16:28
前端一点红
摘要：简介 CSS中Grid是一种二维网格式布局方式。我们常规使用table、float、position、inline-block等布局，但它们遗漏了很多功能，例如垂直居中。后来css3中flexbox的出现解决了很多布局问题，但是它也是一维布局，而不是复杂的二维布局，Grid是为了解决二维布局问题而创
阅读全文
posted @ 2020-05-23 16:05
前端一点红
摘要：css盒子模型用于处理元素的内容、内边距、边框和外边距的方式简称。元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。 内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代
阅读全文
posted @ 2020-05-23 15:57
前端一点红
摘要：这篇文章主要讲解：右键复制失效方法、菜单"文件"－"另存为"失效方法、防止查看源代码进行复制的方法、防止页面缓存的方法。来达到一定的代码保护效果 右键复制失效方法: 方法一： <script language="Javascript"> document.oncontextmenu=new Func
阅读全文
posted @ 2020-05-23 15:41
前端一点红
摘要：一、解决iphonX白条,网站扩展到整个屏幕 网页在iphoneX的浏览器屏幕显示上，默认情况下在头部的2侧会出现白条背景，网站被限制在了一个“安全区域”内，移除白色背景的方法 方法一：设置body的背景色： .body{ background-color：#f00; } 方法二：添加mate属性v
阅读全文
posted @ 2020-05-23 13:09
前端一点红
摘要：通过 CSS3 的 content 获取内容，很有意思的一个思路，实际场景中有可能用的到： CSST (CSS Text Transformation) 利用js动态创建一个link插入到文档中, 请求css文件. 利用 computedStyle = window.getComputedStyle
阅读全文
posted @ 2020-05-23 13:03
前端一点红
摘要：懒加载 什么是懒加载？ 懒加载也就是延迟加载。当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。 为什么要使用懒加载？ 很
阅读全文
posted @ 2020-05-23 12:45
前端一点红
摘要：整理一下CSS最容易躺枪的二十规则，大家能躺中几条？ 转载：API中文网 一、float:left/right 或者 position: absolute 后还写上 display:block？ 二、认为布局就是 Float，所有的地方都是 Float，全家都是 Float！ 三、认为 px 是一个
阅读全文
posted @ 2020-05-22 16:06
前端一点红
摘要：如何提高CSS性能，根据页面的加载性能和CSS代码性能，主要表现为： 加载性能 （主要是从减少文件体积，减少阻塞加载，提高并发方面入手），选择器性能，渲染性能，可维护性。 1、尽量将样式写在单独的css文件里面，在head元素中引用 (1)内容和样式分离，易于管理和维护 (2)减少页面体积 (3)c
阅读全文
posted @ 2020-05-22 16:01
前端一点红
浙公网安备 33010602011771号