随笔分类 - html\css
摘要：首先，为了避免与微软的 Visual Studio IDE 发生混淆，这里先说明一下，Visual Studio Code（也即 VS Code）是一款轻量级的编辑器，类似 Atom 或 Sublime Text。它的采用量节节攀升，迅速占领了开发者市场！ 2015 年，微软推出了 VS Code
阅读全文
posted @ 2020-10-13 15:13
浅笑·
摘要：今天我们深度了解一下 rem 单位，这个单位目前已经得到了优秀浏览器的支持，并且有一些兼容方案来帮助你在低版本的 IE 浏览器中的使用它。 什么是 rem 可能在你使用收音机或者用其他音乐播放器之前，就已经听过“R.E.M.”这个词了。在这个乐队眼中，这个词是“浅睡眠时眼球的快速转动”的缩写，而在
阅读全文
posted @ 2020-10-13 15:11
浅笑·
摘要：前几天遇到一个页面需求是这样的： 一个评论框，后面的按钮有点赞或者发送评论两种状态，其中发送按钮有根据输入框中是否有字分为可点击和不可点击两种状态。 需求： 没有文字，没有聚焦——点赞没有文字，聚焦——灰色发送有文字——红色发送 如果用js实现，需要监听输入框的change和focus事件，比较麻烦
阅读全文
posted @ 2020-10-13 15:10
浅笑·
摘要：SVG 简介 SVG，即可缩放矢量图形(Scalable Vector Graphics)，是一种 XML 应用，可以以一种简洁、可移植的形式表示图形信息。目前，人们对 SVG 越来越感兴趣。大多数现代浏览器都能显示 SVG 图形，并且大多数矢量绘图软件都能导出 SVG 图形。SVG 主要可以概括为
阅读全文
posted @ 2020-10-13 15:09
浅笑·
摘要：做前端最难受的就是产品给的需求以及测试给的bug了，看待这个标题是不是有点蒙，这是什么需求，下面来解读下！ 需求 需求：如下图，点击已保存按钮弹出已保存列表，当点击屏幕其他区域要关闭这个下拉框，是不是很简单 加点东西，但是点击这个下拉框内部的区域不能关闭下拉框）（原谅我里面没写东西你就当有东西，给个
阅读全文
posted @ 2020-10-13 15:06
浅笑·
摘要：实现一个普通边框 <style> .border { width: 100px; height: 50px; border: 1px solid red; } </style> <div class="border"></div> 实现由四个三角形组成的正方形 <style> .triangle {
阅读全文
posted @ 2020-10-13 15:04
浅笑·
摘要：根据设计稿的实际宽度值,与设计稿最大宽度值,动态计算根字体大小，适应不同的屏幕比例。 本文的px转rem换算公式为: 100px = 1rem 18px = 0.18rem 基础css body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,pre,form,input,textare
阅读全文
posted @ 2020-10-13 15:03
浅笑·
摘要：在css基础当中，我们往往会遇到块元素和行内元素，块元素和行内元素也是很重要的基础知识。那么块级元素是什么？html中的块级元素有哪些？ 什么是块级元素？ display属性为block的元素为块级元素。通常块级元素在很多浏览器中，都是显示占据一行，并且排斥其他元素和其他元素在同一行，在浏览器中，块
阅读全文
posted @ 2020-10-13 15:02
浅笑·
摘要：在使用react的项目中一般都有兼容性问题，特别是使用了组件库比如element-react或者ant-design等等，在ie下多少都会有点小问题，比如样式不正确，或者组件功能失效，甚至白屏等问题。 IE白屏问题 一般情况下，白屏的问题在index.html中引入这两个js就能解决 <!--兼容i
阅读全文
posted @ 2020-10-02 14:27
浅笑·
摘要：页面可见性API——Page Visibility API全屏API——Full Screen 访问摄像头和麦克风——getUserMedia API 电池API——Battery API 预加载——Link Prefetching 监听屏幕旋转变化接口: ——orientationchange 手
阅读全文
posted @ 2020-10-02 14:26
浅笑·
摘要：前言 css中裁剪和遮罩相关的属性一般来说是比较少用到的，但是最近写项目的时候遇到一个问题，要给一张图片上加个白色遮罩，产生合成效果，这就不得不用到css遮罩相关的属性，顺便把裁剪相关属性一起学习来，做个总结，接下来就进入正文 clip-path clip是css中第一个用来裁剪的属性，但是由于新的
阅读全文
posted @ 2020-10-02 14:24
浅笑·
摘要：摘要 JavaScript 和排名前 3 名的 UI 框架将继续继续火热； Svelte 将会继续发展 云计算，服务器端编程和 JAMStack 会不断增长； 预处理和性能优化才是未来； WASM 为Web 带来了很多运算能力； aterial Design、圆角、渐变和深色主题模式是当前的设计趋势
阅读全文
posted @ 2020-10-02 14:23
浅笑·
摘要：浏览器基本的工作流程 进入主话题之前，先罗列一下浏览器的主要构成： 用户界面－ 包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分 浏览器引擎－ 用来查询及操作渲染引擎的接口 渲染引擎－ 用来显示请求的内容，例如，如果请求内容为html，它负责解析
阅读全文
posted @ 2020-10-02 14:22
浅笑·
摘要：“前端框架真的太香了，香到我都不敢徒手撕 DOM 了！” 虽然绝大多数前端er都有这样的困扰，但本着基础为大的原则，手撕 DOM 应当是一个前端攻城狮的必备技能，这正是本文诞生的初衷 —— DOM 并没有那么难搞，如果能去充分利用它，那么你离爱上它就不远了。 三年前我初入前端坑的时候，发现了一个叫做
阅读全文
posted @ 2020-10-02 14:20
浅笑·
摘要：css3新增属性有哪些？来提问这个问题的人都应该知道css3是css的升级版本，那么，css3既然是升级版本，自然是会新增一些属性，接下来本篇文章将给大家介绍关于css3中常用的新增属性。 一、css3新增边框属性 1、css3新增属性之border-color：为边框设置多种颜色 p{ borde
阅读全文
posted @ 2020-10-02 14:19
浅笑·
摘要：输入URL到页面加载发生了什么？通过连接这个过程，然后针对性地对每个过程进行优化，最终实现的就是我们的前端性能优化。本篇文章主要介绍一些基础性的概念，很少涉及真正的性能优化。 具体过程？ 打开浏览器，输入URL，到页面展示出来，这个中间大致经历了这些过程： 输入URL DNS解析 TCP握手 HTT
阅读全文
posted @ 2020-10-02 14:17
浅笑·
摘要：1.video标签 支持firefox自动播放 谷歌、ie不支持自动播放 <video controls="controls" autoplay="autoplay" name="media"><source src="./img/music.mp3" type="audio/mpeg"></vid
阅读全文
posted @ 2020-10-02 14:16
浅笑·
摘要：可能大家都知道，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？接下来，我们就一起来分析一下。 原理解析 那么为什么会出现上面的现象呢？我们从浏览器的渲染过程来解析下。 不同的浏览器使用的内核不同，所以他们的渲染过程也是不一样的。目前主要有两个： webkit渲染过程
阅读全文
posted @ 2020-10-02 14:15
浅笑·
摘要：今天给大家分享的是css3制作的带3d效果的方块，上面简单整理了一下2019年的网红热词。这个DEMO用到了css3的3d变化技巧，做出来的效果还不错。请注意，该3d效果依赖transform-style: preserve-3d属性，必须在现代浏览器或IE11中才能看到效果。 盘他 柠檬精 OMG
阅读全文
posted @ 2020-10-02 14:13
浅笑·
摘要：1、get 在浏览器回退时是无害的，而post会再次提交请求； 2、get 产生的URL地址可以被收藏，而post不可以； 3、get请求会被浏览器主动缓存，而post不会主动缓存，除非手动设置； 4、get请求参数会被完整的保留在浏览器 历史记录中，而post不会； 5、get请求在url中传送的
阅读全文
posted @ 2020-10-02 14:12
浅笑·
浙公网安备 33010602011771号