众所周知，小程序当中有一类特殊的内置组件——原生组件，这类组件有别于 WebView 渲染的内置组件，他们是交由原生客户端渲染的。原生组件作为 Webview 的补充，为小程序带来了更丰富的特性和更高的性能，但同时由于脱离 Webview 渲染也给开发者带来了不小的困扰。在小程序引入「同层渲染」之前，原生组件的层级总是最高，不受 z-index 属性的控制， …
border-radius属性
一、网络加载DNS预加载通过dns-prefetch属性可以让浏览器提前解析资源或接口对应的服务器IP地址，避免在请求中发起DNS解析请求，节省请求时间资源预加载利用preload，prefetch，preconnect属性我们可以在<head>内部声明式的书写资源获取请求，提前加载非首屏但又较重要的资源，避免在满足首屏优先加载的情况下，反而忽略 …
知识点1：CSS3CSS3是CSS语言的最新版本，旨在扩展CSS2.1，它增加了许多新特性与新的布局方式。为了加快那些已经确认没有问题的特性的标准化速度，CSS3划分了一系列相互独立的模块，按照各自进度来进行标准化。因此现在标准CSS包括修订后的CSS2.1以及完整模块对它的扩充，模块的level数并不一致。W3C会定期发布snapshots（快照），列出C …
必须掌握的前端基础知识, 什么是浮动?看浮动前,先学几个前面文章补充的:圆角边框原理border-radius:10px (radius半径)10px 半径值,越大越圆border-radius:50% 百分比正方形是宽度和高度的一半就是圆形矩形设高度的一半就是圆角矩形复合属性:border-radius: 10px 20px 30px 40px (左上, …
大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~写在前面过年了~ 过年了~ 过年了~辞旧迎新过年啦 张灯结彩春节啦~金鸡起舞送福啦 新的一年福来啦~文章开头几句歌词，顿时显得喜庆了不，我们的灯笼是下面这个样子的。animation属性画灯笼我们肯定不能画一个静态的灯笼，我们先来复习一下CSS中的 animation …
出于好奇：js中使用json存数据查找速度快，还是使用数组存数据查找快？探究 V8 中对象的实现原理，熟悉数组索引属性、命名属性、对象内属性、隐藏类、描述符数组、快慢属性等等。:gift: D8调试工具使用请来 这里对象属性我们先来看一个例子。假设我们有这样的代码：<pre class="prettyprint hljs kotlin" …
1. Browser Default Styles可以在 Browser Default Styles 中查询 HTML 元素在每个浏览器下的默认样式；2. Clippy可以在 Clippy 为你的图片作剪辑，并且生成对应的 css clip-path 属性；3. CSS keyframesCSS keyframes 可以帮助你创建 CSS 帧动画；4. N …
**CSS Viewport units(视口单位)**在过去几年已经出现了，随着时间的推移，越来越多的开发人员开始使用它们。它们的好处在于为我们提供了一种不需要使用J avaScript 就能以动态的方式调整大小的方法。而且，如果它失效，也有很多备用方案。在本文中，我们将学习 CSS Viewport units(视口单位)以及如何使用它们，并用列举一些常 …
作为一名前端工程师, 需要对css技巧有充分的研究和了解, 接下来笔者将会带大家一起掌握如何用css的圆角属性来实现有点意思的加载动画.css的border属性和border-radius属性笔者在前面的文章中也分享过了如何利用border来实现不同的形状, 比如三角形, 如下为原理图:利用这个原理我们只要把元素的border-radius 设置为圆形(比如 …
之前文章介绍过JavaScript数字时钟的设计与实现，主要用于借助数组实现对数字时钟数字进行存储与标识。在获取客户端系统时间之后，选择对应时钟数字进行显示即可。本文主要介绍基于CSS动画的时钟设计与实现。实现思路与原理本文设计使用CSS旋转元素属性，对时钟对应指针进行角度旋转。主要设计内容包括表盘及指针的设计。其中表盘素材如下图所示：通过DIV层的嵌套，制 …